首发于 WEB前端 程序员，学知识，分享经验
切换模式
VUE实现PDF.js的pdf文件在线预览
Dandelion
程序员之路
首先，要实现PDF在线预览功能，需要PDF.js或者PDFObject.js插件，PDF.js可以实现统计阅读进度，PDFObject.js只是显示用的（这里才用的是统计阅读进度的方式实现在线PDF预览）。
1.导入插件，我是从官网直接下载，链接： 点击打开链接，注意要放在static文件目录下。
这样webpack打包之后的路径也一 一对应。这样引入的文件比较大，如果想要npm install引入也可以，主要的就是目录中的view.html文件，如果pdf在项目中，可以使用相对路径进行预览，不存在跨域问题。但是，如果想要预览服务器上的pdf，则是远程预览，这种方式会带来跨域的问题。想要解决跨域问题，需要后台以文件流的形式返给我们，然后前台以文件流的形式打开，就不会出现这种跨域的问题啦。
2。使用iframe打开
<iframe id="pdfPlayer" src="' +URL + '接口?fileName=' +Url) + '" frameborder="0" width="100%" height="600px"></iframe>
需要注意的是： file参数中默认只允许传简单路径比如： http://www.aaa.com/aa.pdf. 如果你要浏览的pdf路径需要传参数的话。 这时候直接传入的话会解析出错， 因为pdf.js无法判断参数是viewer.html的参数呢还是aa.pdf的参数。所以，
URL 必须进行encode编码 ，encodeURIComponent() 把字符串编码为 URI 组件
后台返给的文件流如下图：
3。如果需要统计pdf阅读进度，需要修改源码，把当前阅读页码存到缓存中的数据记录给页面，这样就可以实现统计进度了。
谢谢观看！
编辑于 2019-03-19 15:46
PDF
Vue.js
文章被以下专栏收录
