当前位置 : 主页 > 网页制作 > html >

WEB文档在线预览解决方案

来源:互联网 收集:自由互联 发布时间:2021-06-12
web页面无法支持预览office文档,但是却可以预览PDF、flash文档,所以大多数解决方案都是在服务端将office文档转换为pdf,然后再通过js的pdf预览插件(谷歌浏览器等已经原生支持嵌入PD

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>
网友评论