Vue中使用pdfJs预览PDF、图片

Vue中使用pdfJs预览PDF、图片

pdf.js是一个使用HTML5构建的可移植文档格式库。它可以帮助我们在浏览器中构建pdf文档，实现在线查看pdf文件的功能。

实现步骤如下：

1.下载pdfJs到本地（官网下载地址），放到项目根目录下的静态资源目录static文件夹内，将文件命名为pdfJs。

如下图

2. 使用iframe打开

<iframe id="pdfPlayer" src="URL"  frameborder="0" width="100%" height="600px"></iframe>

或者

<iframe id="pdfPlayer" :src="pdfUrl" frameborder="0" width="100%" height="600px"></iframe>

需要注意的是：

file参数中默认只允许传简单路径比如：http://www.aaa.com/bb.pdf.

如果你要浏览的pdf路径需要传参数的话。 这时候直接传入的话会解析出错， 因为pdf.js无法判断参数是viewer.html的参数呢还是aa.pdf的参数。

viewer.html的参数呢还是aa.pdf的参数。

所以，URL 必须进行encode编码 ，encodeURIComponent() 把字符串编码为 URI 组件。