Vue项目使用pdf.js

前段时间有个支持在线学习功能的项目，有须要在线预览pdf格式课件的功能，我就想在线预览pdf多简单，由于大部分浏览器都支持打开pdf文件，因此直接放个iframe而后src是pdf文件的地址不就好了吗，so easy！！（什么？兼容性？兼容性是什么东西？（づ￣3￣）づ不是Chrome别跟我说话）html

原本觉得就这样了，惋惜，天不遂人愿，领导来提需求了，咱们这是支持教学、学习的平台，因此pdf的内容须要支持复制的，而且由于老师要讲课，最好可以支持相似PPT播放的功能......相顾无言，浏览器直接打开的就支持复制，可是播放功能是什么鬼哟！（我好惨一男的） 前端

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

导入pdf.js插件

1.官网下载源包

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

2.放入项目

放在vue项目static目录下，目录结构以下： webpack

3.修改一些源码配置

由于pdf.js是不支持跨域文件加载的 直接加载是不会成功的。会报 “file origin doesnot match viewer”错误，因此须要把viewer.js文件内的抛出错误这一行报错注释掉，这个修改是看了这位老哥的博客，贴上他的文章地址：连接 git

项目使用

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

坑1

由于服务端返回的是文件连接，可是为了保证文件的保密性，防止连接直接复制给其余人其余人就能够随便打开使用这个问题，后端开发人员在文件连接后面添加了一些具备时效性的token之类的东西，而后文件连接就变成这样了http://10.20.124.151/group1/M00/00/02/ChR8l1zBdSuAXoATAAvc4itpNIU648.pdf?token=ee94d7d3b3452c62b18364698839834b，可是pdf.js默认只容许传简单路径，由于pdf.js没法判断token是viewer.html的参数仍是所要预览文件的参数，因此须要先对返回的文件连接进行encodeURIComponent编码web

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

这样的话这个坑算是爬过了vue-cli

坑2

解决了上面的问题，是否是以为差很少了，我能说到这个时候我程序都还无法运行，页面仍是黑的吗？由于pdf.js做为静态资源根本没被识别打包，相对路径根本找不到，我使用npm run build打包尝试了一下发现打包后的文件中根本找不到pdf.js npm

后来研究了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了，能够洗洗睡了canvas

可是，后面我看了一下其余版本的vue-cli发现不少版本的都可以直接把pdf.js做为静态资源正常打包，可能就咱们项目使用的这个版本是个坑吧，因此若是你在开发中发现静态资源能够正常打包就忽略坑2吧。

看看时间也差很少了，准备下班