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文件，那直接相对路径就可以在页面预览，我今天说的是远程预览（服务器端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://uat.hjl.hscf.com/api/esm/v1/contractTemplates/load?id=13&access_token=a33e14ef6aba87b593b1aac31e3d97bb

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

效果图

上面是pc端的，移动端也同样试用

根据以上在实现在项目中

组件代码