Vue项目使用pdf.js__Vue.js
发布于 3 年前 作者 banyungong 2117 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

前段时间有个支持在线学习功能的项目,有需要在线预览pdf格式课件的功能,我就想在线预览pdf多简单,因为大部分浏览器都支持打开pdf文件,所以直接放个iframe然后src是pdf文件的地址不就行了吗,so easy!!(什么?兼容性?兼容性是什么东西?(づ ̄3 ̄)づ不是Chrome别跟我说话)

本来以为就这样了,可惜,天不遂人愿,领导来提需求了,我们这是支持教学、学习的平台,所以pdf的内容需要支持复制的,并且因为老师要讲课,最好能够支持类似PPT播放的功能…相顾无言,浏览器直接打开的就支持复制,但是播放功能是什么鬼哟!(我好惨一男的)

吐槽一番,还是老老实实去实现功能吧,但是GitHub找了一圈vue项目的pdf轮子,基本都是大同小异,基本思想就是使用canvas把pdf内容绘制出来,但是这样最大的一个问题就是pdf的内容完全没办法复制了,第一个需求就不满足了,没办法只能扩大搜索范围,最终瞄准了pdf.js,在官网的demo里试了下,领导的需求完全满足,所以只能排除万难把pdf.js引入项目了。

导入pdf.js插件

1.官网下载源包

贴上地址,不想踩坑就老老实实下载稳定版本吧

2.放入项目

放在vue项目static目录下,目录结构如下:

3.修改一些源码配置

因为pdf.js是不支持跨域文件加载的 直接加载是不会成功的。会报 “file origin doesnot match viewer”错误,所以需要把viewer.js文件内的抛出错误这一行报错注释掉,这个修改是看了这位老哥的博客,贴上他的文章地址:链接

项目使用

使用的话很简单,页面放一个iframe,然后src等于到viewer.html的相对路径,然后file=后端返回的文件路径'/static/pdfjs/web/viewer.html?file=' + pdfVisitUrl,这样就大功告成了…才怪!!!坑还是要爬的,当然后端返回流文件形式前端解析打开当然是更好了,这个可以看一下上面贴的那个博客

坑1

因为服务端返回的是文件链接,但是为了保证文件的保密性,防止链接直接复制给其他人其他人就可以随便打开使用这个问题,后端开发人员在文件链接后面添加了一些具有时效性的token之类的东西,然后文件链接就变成这样了http://10.20.124.151/group1/M00/00/02/ChR8l1zBdSuAXoATAAvc4itpNIU648.pdf?token=ee94d7d3b3452c62b18364698839834b,但是pdf.js默认只允许传简单路径,因为pdf.js无法判断token是viewer.html的参数还是所要预览文件的参数,所以需要先对返回的文件链接进行encodeURIComponent编码

<iframe
    :src="`/static/pdfjs/web/viewer.html?file=${encodeURIComponent(pdfVisitUrl)}`"
    frameborder="0"
    class="pdf-window"
>
</iframe>

这样的话这个坑算是爬过了

坑2

解决了上面的问题,是不是觉得差不多了,我能说到这个时候我程序都还没法运行,页面还是黑的吗?因为pdf.js作为静态资源根本没被识别打包,相对路径根本找不到,我使用npm run build打包尝试了一下发现打包后的文件中根本找不到pdf.js

后来研究了webpage,发现针对静态资源打包主要是使用一个copy-webpack-plugin的插件,所以在webpack.prod.conf.js和webpack.dev.conf.js两个文件中加上下面代码

const CopyWebpackPlugin = require('copy-webpack-plugin')

new CopyWebpackPlugin([
    {
    from: path.resolve(__dirname, '../src/static'), // 这个路径使用的是static目录相对于当前js文件的相对路径
    to: config.dev.assetsSubDirectory,
    ignore: ['.*'] // 匹配所有,把static目录下文件一股脑全部作为静态资源打包,省的一些幺蛾子
    }
])

保存,重新npm run dev,这次终于ojbk了,可以洗洗睡了

但是,后面我看了一下其他版本的vue-cli发现很多版本的都能够直接把pdf.js作为静态资源正常打包,可能就我们项目使用的这个版本是个坑吧,所以如果你在开发中发现静态资源可以正常打包就忽略坑2吧。

看看时间也差不多了,准备下班

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: Zoom 原文链接:https://juejin.im/post/6844903843088564238

回到顶部