修改 vue-pdf 源码升级 pdfjs-dist 包, 以解决部分 pdf 文件显示花屏问题

背景:

客户反馈有部分文件预览花屏

最终解决方案:

1. 自己 fork vue-pdf 仓库, 修改 pdfjs-dist 版本, 升级到 3.3.122 (我是 vue2 项目 + node 10 环境)
2. 修改源码中引用地址带有 pdfjs-dist/es5/ 的地方, 去掉 es5 , 另外如果还有报错自己搜一下 pdfjs-dist/ , 看看引用的资源是不是在新版本的 node 包里没了
3. 卸载旧 vue-pdf , 安装你个人的项目 npm install 你自己的vue-pdf项目名@git+你的项目地址#4.3.6井号后面是分支名可选 --save

定位 + 解决过程:

1. 查看发现预览功能用的 vue-pdf 组件, 看 github 仓库, 最新版 4.2.0 , 四五年没更新了, issue 里有其他人也反馈花屏问题 — pdf花屏：大部分文件正常展示，只有个别文件有问题，如图，有遇到的大佬看到，给个思路。 #418 Open, 有人回答说升级依赖 pdfjs-dist 版本即可, 但没说多少版本, 咋升级等

2. 试了下其他组件, 比如 pdfjs 的在线 demo, 没这个问题, vue-pdf-embed@1 (vue2 项目, 只能用 1 版本) 也有这个问题, 但至少确认了用现在的 pdfjs 预览是没问题的, 为减少改动, 准备直接升级 vue-pdf 的 pdfjs-dist 依赖

3. 从 vue-pdf 仓库 issue 里发现有人提申请升级版本, 还有人 fork 仓库之后自己修改了提了 pull request — @teckel12 的 pull request : Update pdfjs-dist library for XSS security vulnerabilities , 他还出了 @teckel/vue-pdf npm 包, 但只有 4.3.5 版本, 其依赖还是低了, 仓库有 4.3.6 分支和 tag , 此 pull request 就是从该仓库的 4.3.6 上提交

4. 从仓库安装该分支 npm install @teckel/vue-pdf@git+https://github.com/teckel12/vue-pdf#4.3.6 -S 试了下, 运行报错

   these dependencies were not found:
   * pdfjs-dist/es5/build/pdf.js ....
   

5. 看了下, pdfjs-dist 新版本是没有 es5 文件夹的, 该用户应该就只是改了版本名而没有修改源码, 导致报错

6. 参照他的改动, 导入 vue-pdf 仓库源码到本地项目, 修改源码, 对比了下结构, 网上搜了下, 应该除了 es5 这个文件夹之外, 其他的文件名大差不差, 直接去掉 es5

7. 但发现问题: 源码引用的 pdfjs-dist 的 js 文件, 但新版只有 mjs 文件, 试了下引用 mjs 文件, 但是报错, 看着是语法错误, ?. 这种 es6 语法不支持? 还是 mjs 文件不支持?

8. 试了半天, 找到一篇文章（回忆录）升级项目 pdfjs 版本记录), 提到’要放开对 pdfjs-dist 依赖的打包，使这些新的语法特性被转换成 ES5 版本的写法。由于项目是 Vue Cli 创建的，需要修改 vue.config.js 中的配置，加入了一个配置项 transpileDependencies: [/pdfjs-dist/\]，使的 vue 项目能够正常打包 pdfjs-dist 中的内容’

9. 问了下 AI , pdfjs-dist 版本跟 node 版本有没有关联, 用了 AI 推荐的 3.3.122 版本(用的是 js 不是 mjs), 再在 vue.config.js 加上配置, 成功了!

其他:

1. 搜索相关问题时, 还看到另一个修改 node_module 里依赖源码的方案, 不用自己整项目仓库 — 手把手教你使用patch-package给npm包打补丁; 因为之前已经用现在这种方式安装过其他项目, 就没试, 以后说不定可以试试