vue2预览pdf实践与排坑

概述

近期在项目开发中遇到了有关于pdf预览的需求，所以对目前较为常见的几个工具进行了实现方案调研与实践，在此简单记录。主要调研了vue-pdf、pdf.js、pdf-dist

首先三者可以说同源，pdfjs的gitHub，Readme可以看到

---

pdf-dist / vue-pdf

vue-pdf是针对pdf-dist做了一层封装，使用起来更加便利，样式调整更灵活。

具体实现可以参照这两位位作者的博客

 保姆级vue-pdf的使用过程-CSDN博客

https://www.cnblogs.com/luo1240465012/p/16283822.html

但是与pdf.js不同之处，chrome中ctrl + F无法匹配到pdf里的文字，所以需要增加另一种方式呈现。所以我使用了pdfjs

---

PDF.js

附上地址

官网：PDF.js

gitHub：https://github.com/mozilla/pdf.js

通过阅读github的readme文档可以看出来，官方给出的使用方法有两种

方法一

本地搭建该项目，参照文档进行搭建，我没有采用这种方式所以不做赘述

方法二

也是我采用的方法，之所以没用最新版（v4..）,拉到本地后发现控制台除了pdfjs的跨域错误，还有一些pattern.at之类的异常，资料较少难以排查所以换为如下版本

v2.5.207地址：https://github.com/mozilla/pdf.js/releases/tag/v2.5.207

下载dist包后解压出来两个目录一个license

下一步到项目的public文件夹下新建static文件夹，然后将这三位放到static目录下(一定要新建static目录，项目中访问相当于绝对路径)

this.src为后端返回的pdf文件所在服务器的地址，预览按钮绑定fullScreen事件

fullScreen(){
    window.open(`static/pdf/web/viewer.html?file=${encodeURIComponent(this.src)}`)
}

如果报错file origin does not match viewer's，viewer.js中找到这段直接注释掉，我的版本是在1802行

if (origin !== viewerOrigin && protocol !== "blob:") { 
    throw new Error("file origin does not match viewer's"); 
}

最终成功打开并实现预览，如果上述步骤中有控制台报错一般都能百度到，而且降版本后原来的报错也没有了。

按需优化

viewer.html页面中的顶部工具栏按钮可以根据需要设置隐藏，看其他网友说不要注释，我尝试行间写入display:none，或visiblilty:hidden发现不生效。而后可以在控制台看到各个按钮在页面渲染完毕后的id，所以可以在viewer.css中写入（隐藏下载，打印，打开本地文件等不常用按钮）

#viewBookmark,
#openFile,
#presentationMode,
#download,
#print{
    display:none;
}

如需添加水印可参照这位作者的文章，实测有效而且效果比整齐排列更美观

https://blog.csdn.net/fathing/article/details/87340543g

该文章中有关水印的样式如间距和列数行数，可以自行修改，我根据我的业务场景补充了水印溢出不换行，且鼠标无法选中

mask_div.style.userSelect = 'none';
mask_div.style.whiteSpace = 'nowrap';

同时我的业务场景需要在用户打开该页面时，自动聚焦搜索栏

没有找到具体渲染结束回调方法，并且根据debugger看出很多方法会执行两次，所以根据不同次数的this对象可以看出其中的区别，初始化时页面内容按钮还没有渲染完毕，所以修改viewer.js的如下代码，当第一页渲染完毕，即可获取到search按钮，并触发点击事件（希望有经验的猴米可以指出正确的渲染结束回调方法~）

以上即为本次有关pdf预览的两个方案的实现，大家也可以借鉴如下对我有帮助的文档~

https://www.cnblogs.com/lisir-blogshare/p/15710769.html

https://www.cnblogs.com/Dongmy/p/17215879.html