在做PDF预览相关功能的时候,相信很多人都会使用PDF.js这个插件。正常情况下显示PDF是没什么问题的,但是如果显示的PDF有电子签名的时候,我们会发现预览时,界面并不会显示出电子签名,这是因为该插件默认隐藏了,要显示电子签名的话,需要在插件源码里修改代码。
1. 步骤一
在node_modules/pdfjs-dist/build/pdf.worker.js下注释一行代码(一般是19641行)
data.fieldValue = null;
// 注释掉底下这行,就可以显示电子印章
// this.setFlags(_util.AnnotationFlag.HIDDEN);
2. 步骤二
在node_modules/pdfjs-dist/es5/build/pdf.worker.js注释掉一行代码(一般是31690行)
data.fieldValue = null;
// 注释掉这行,就可以显示电子印章
// _this3.setFlags(_util.AnnotationFlag.HIDDEN);
如果node_modules下没有pdfjs-dist,就在vue-pdf下找,不同依赖位置不一样,我项目一开始是在node_modules/pdfjs-dist,后面重新安装了几次依赖后就变成了node_modules/vue-pdf/node_modules/pdfjs-dist
修改完这两个文件后,电子签名就可以正常显示了,但是现在又有了一个新的问题,如果每次都重新安装或者更新依赖,那么每次都要去修改一次源码吗?
这时候,我们可以使用patch-package来打个依赖补丁,让它在每次安装依赖时自动应用我们的修改,首先安装工具链
npm install patch-package --save-dev # 核心工具
npm install postinstall-postinstall --save-dev # 确保 yarn 兼容性
然后执行命令
# node_modules/pdfjs-dist目录类型的执行这条
npx patch-package pdfjs-dist
# node_modules/vue-pdf/node_modules/pdfjs-dist目录类型的执行这条
npx patch-package vue-pdf/pdfjs-dist
出现这个时表示生成成功,会在你的项目根目录生成patches文件夹
同时,在package.json中添加在 package.json 中添加 postinstall 自动补丁脚本
scripts: {
"postinstall": "patch-package"
}