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的路徑接口
把兩個拼接在一起
let officeUrl = 'http://view.officeapps.live.com/op/view.aspx?src='+urlwindow.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='+urlwindow.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< span=""> </div<>
<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'; }
注意: <文檔位置> 必須是編碼的 URL,並且文檔在 Internet 上必須是可公開訪問的。
以下是 Office Web Viewer 中的文檔的一些示例:
在 Microsoft Build 大會上,有大量 PowerPoint 系列的演示文稿。如果您要觀看其中一個演示文稿的視頻,還可使用 Office Web Viewer 查看包含此演示文稿的 PowerPoint 系列。http://view.officeapps.live.com/op/view.aspx?src=http%3a%2f%2fvideo.ch9.ms%2fbuild%2f2011%2fslides%2fTOOL-532T_Sutter.pptx在一個受歡迎的銀行網站上,我們發現了這個不錯的 Wedding Budget Planner 電子表格。為了預覽此電子表格而不是下載它,我們創建了一個 Office Web Viewer 連結。http://view.officeapps.live.com/op/view.aspx?src=http%3A%2F%2Flearn.bankofamerica.com%2Fcontent%2Fexcel%2FWedding_Budget_Planner_Spreadsheet.xlsx以下是我們在 Bing 上發現的一個學校新聞通訊模板。通過使用 Office Web Viewer,您無需擔心學校的每一個人是否能夠查看 Word 文檔的問題,現在他們只需要一個瀏覽器。http://view.officeapps.live.com/op/view.aspx?src=newteach.pbworks.com%2Ff%2Fele%2Bnewsletter.docx如果您的文檔是一個 Office 文檔,並且在 Internet 上可公開訪問,那麼您便可順利開始。Office Web Viewer 連結很好地替換了下載連結,因為您的讀者無需特殊程序也能查看您的文檔,並且他們無需退出其瀏覽器。