vue 离线预览文件插件

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=’+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

然后

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 链接很好地替换了下载链接，因为您的读者无需特殊程序也能查看您的文档，并且他们无需退出其浏览器。