Vue项目使用pdf.js

前段时间有个支持在线学习功能的项目，有需要在线预览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吧。

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