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>

原文地址：https://www.cnblogs.com/lizhao123/p/11581971.html