vue项目中使用pdf.js预览pdf文件

项目要求需要预览pdf文件，网上找了很久，大多数都是推荐pdf.js，自己先了解了一下，最后决定用pdf.js，

但是发现，在vue中使用这个很少！！！！！所以我就写这一篇帮助一下vue使用pdfjs的朋友！

其实 这和前端框架无关的，直接使用pdf.js原生

     搜多了你就发现有几个封装pdf.js的vue组件，个人试验了其中一个，效果不是很好，所以，当然啊，用原生

的是最好的啦！

   首先肯定是导入插件，我是从官网直接下载，链接：点击打开链接，注意放在static文件目录下，

这里面有核心的pdf.js和pdf.worker.js,以及展示pdf的viewer页面把它作为静态资源来编译，基本想要的build和web这两个重要文件夹的东西都正常编译。当然你可以可以npm install一下，整个文件放在static目录下的不好地方就是打包会很大哟（当然你可以选择性的删除里面的文件，比如绝大部分语言包）。目录结构放一下

其实就可以直接用的，网上很多，viewer.js 里的

 

代表着文件路径，如果你项目中有个pdf文件，那直接相对路径就可以在页面预览，如果使用远程预览，其实这里的路径会被覆盖，你删不删除它自带的路径都不会影响你的远程预览，so我今天说的是远程预览（服务器端url预览），pdf.js也提供了一种方法，

用file= 的方式也可以打开哟，放在页面上使用，我是iframe进行嵌套

    用这种方式必不可少的是跨域问题，你存储文件的服务器路径会和项目产生跨域，我的解决办法是，让后台返回流的形式返回文件，后台代码案例：

 

注意：

 

1    pdf.js是不支持跨域文件加载的  直接加载是不会成功的。会报  “file origin doesnot match viewer”错误。 所以我们得改变一下源码

把这句警告直接注释就行了

 

2    file参数中默认只允许传简单路径比如：http://www.a.com/file.php.  如果你要浏览的pdf路径为http://www.a.com/file.php?id=2001。 这时候直接传入的话会解析出错， 因为pdf.js无法判断id=2001是viewer.html的参数呢还是file.php的参数

 这告诉我们 url必须进行encode编码  把参数file后传入的动态参数中特殊字符转义：

这里又会有两种方法：

encodeURI() 把字符串编码为 URI
encodeURIComponent() 把字符串编码为 URI 组件

发现        encodeURI不会对:/?&等uri中起分割作用的字符进行编码；

encodeURIComponent则会。

所以必须选择 encodeURIComponent 进行对url的编码

举例：

这样如此就ok了

 

3  

如果 后台返回给前台的流的url形式 是

https://xxx.com/api/esm/v1/contractTemplates/load?id=13&access_token=a33e14ef6aba87b593b1aac31e3d97bb

 

这样pdf.js插件是无法识别的，所以的在最后加上 &.pdf  来骗过插件

效果图

上面是pc端的，移动端也同样试用，这里以微信为例，ios可以用自带的微信浏览器来进行pdf的预览，而安卓则必须用pdf.js来预览pdf咯，分辨ios与安卓的方法，我的博客里有哟！谢谢观看，一起交流进步！

当然这是用iframe打开的，我这里也提供一种不是iframe打开的样式，因为pdf.js本质上是用canvas渲染的，我也是借鉴了他人的代码，具体我也忘了，放一下demo效果,(注意查看服务器返回流，token会失效，你测试的时候会报错，我只是告诉你怎么写而已，谢谢)

最后补上demo链接 ：vue-pdf.js-demo

如果对你有所帮助的话，欢迎star！ 谢谢