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! 谢谢

 

 

 

 

 

 

 

 

 

 

 

 

展开阅读全文

没有更多推荐了,返回首页