WEB文档在线预览解决方案

Posted lizhao123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了WEB文档在线预览解决方案相关的知识,希望对你有一定的参考价值。

web页面无法支持预览office文档,但是却可以预览PDF、flash文档,所以大多数解决方案都是在服务端将office文档转换为pdf,然后再通过js的pdf预览插件(谷歌浏览器等已经原生支持嵌入PDF文档)进行查看。

Aspose
后台转换可以使用Aspose将office文档转换为PDF格式,Aspose功能强大,支持编辑/转换word、excel、ppt、pdf等,且API操作简便快速。Aspose是收费的,你需要下载破解版本。

除了Aspose可以编辑文档,类似的还有NPOI 、POI等。

1. 利用flexPaper预览swf文件,百度文库就是这种方式
  由于现在flash插件用得已经很少,此处不再赘述,详细请看这里

2.   pdfjs
  pdfjs是firefox浏览器内置的pdf预览插件,由于是开源的,我们也可以使用它,ie版本只支持ie9/ie9+。
  它通过将pdf转换为html元素再添加一些css3的样式达到pdf的预览效果,文档样式与原文档几乎没有太大区别。

3.  在页面中嵌入多媒体对象(PDF、flash、video等)

  缺点是不同的浏览器支持及呈现不一致,比如pdf目前只有webkit浏览器原生支持嵌入,而且移动端的webkit浏览器也是不支持的。
  PDF嵌入可以采用已封住好操作的插件PDFObject,也可以通过浏览器API自行编写。

vue中解决方案  

https://view.officeapps.live.com/op/view.aspx?src= 是官网提供的方法

//附件在线浏览
        browseOnline(row) 
            if (!/\.(pdf|PDF)$/.test(row.url))
                // 不是pdf格式 使用微软提供的Office Online实现
                window.open("https://view.officeapps.live.com/op/view.aspx?src=" + row.url, _blank);
                return false;
             else 
                // pdf 格式
            
        ,

pdf 可以在线浏览使用vue-pdf

npm install --save vue-pdf

使用

<template>
    <el-dialog title="预览" :visible.sync="viewVisible" width="100%" height="100%" :before-close=closeDialog>
          <pdf :src="pdfsrc" ></pdf>
    </el-dialog>
</template>

<script>

// 引入刚才下载的 pdf 
import pdf from vue-pdf

  export default 
  
    components: 
      pdf
    ,
    
    data() 
    ,
    
    created()  ,
    
    methods: 
    
 
</script>

 

以上是关于WEB文档在线预览解决方案的主要内容,如果未能解决你的问题,请参考以下文章

文档在线预览解决方案哪家好?

WEB在线预览PDF

word文档在线预览解决方案

借助flexpaper实现word在线预览和打印

Asp.Net在线预览Word文档的解决方案与思路

永中文档在线转换预览双活实现方案