技術標籤：vuevue預覽

vue預覽word，excel，pptx，pdf檔案

1、做word，excel，pptx的預覽，要先確定檔案路徑訪問是通過域名的url來預覽，不可以通過IP的url來訪問

先把檔案路徑的url進行url編碼（encodeURIComponent）

let router = 'https://aaaaaa.com/file/download?filename=file.obj_id'  //檔案路徑
let url = encodeURIComponent(routeUrl)

然後用Office Web Viewer的路徑介面

http://view.officeapps.
 
live.com/op/view.aspx?src=

把兩個拼接在一起

let officeUrl = 'http://view.officeapps.live.com/op/view.aspx?src='+url
window.open(officeUrl,'_target')

這樣就可以預覽word，excel，pptx檔案了

完整的程式碼

let routeUrl = 'https://aaaaaa.com/file/download?filename=file.obj_id'
let url = encodeURIComponent(routeUrl)
let officeUrl = 'http://view.officeapps.live.com/op/view.aspx?src='
 
+url
window.open(officeUrl,'_target')

2、pdf檔案預覽

下載好pdf.js(下載地址在下面)，放到static的目錄下面

網站連結：http://mozilla.github.io/pdf.js/getting_started/#download

百度網盤：連結: https://pan.baidu.com/s/1tdGrN3L-A9wkOIBzXjUWYw 提取碼: pucv

然後

<div style="height:800px;">
  <iframe :src="pdfSrc" width="100%"
 
 height="100%"></iframe>
</div>

getSeePdf(file){
      this.pdffile=file
      let routeUrl = '檔案地址url';
      let pSrc = routeUrl + '?r=' + new Date();
      this.pdfSrc = 'static/pdf/web/viewer.html?file=' + encodeURIComponent(pSrc) + '.pdf';
    },