VUE,PDF.js在线预览pdf

VUE实现PDF.js的pdf文件在线预览

首先，要实现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) + '" frame 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阅读进度，需要修改源码，把当前阅读页码存到缓存中的数据记录给页面，这样就可以实现统计进度了。

谢谢观看！