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>