永久修复pdf.js电子签名印章不显示的问题

51 阅读2分钟
在做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文件夹

image.png

image.png

同时,在package.json中添加在 package.json 中添加 postinstall 自动补丁脚本
scripts: {
  "postinstall": "patch-package"
}
这样当你删除依赖重新安装的时候,就不用每次都去修改插件源码了。
依赖补丁内容参考来源:
掘金:断竿散人

juejin.cn/post/752910…