WEB文档在线预览解决方案

Posted 2022-11-30 lizhao123

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>