vue-pdf @4.3.0
目前版本是4.3.0, 貌似作者已经不更新了,但是在vue项目中使用vue-pdf模块的时候会发现显示发票的时候,电子签章是不显示的
这是因为现 vue-pdf 是依赖于 pdfjs-dist 库的,而它依赖的pdfjs-dist库的版本不支持显示签章.
pdfjs-dist @2.6.347
然后你就会在 node_modules/pdfjs-dist/es5/build/pdf.worker.js 发现有这么一段代码:
if (data.fieldType === 'Sig') {
data.fieldValue = null;
_this3.setFlags(_util.AnnotationFlag.HIDDEN);
}
其中 _this3.setFlags(_util.AnnotationFlag.HIDDEN); 这段代码就是隐藏电子签章的问题,而mozillia/pdfjs的 issue,也说了出于一些原因将签章功能屏蔽了.这时候我们就要去注释这段代码去修复这个问题了.
在我们本地注释这段代码的时候就可以看到签章显示好了,那么我们怎么生产环境或者让别人同步去修改这个改动呢?这就要用到另一个插件 patch-package 了
patch-package @8.0.0
它的作用就是打补丁, 当某些模块有bug的时候,需要自己去改动的时候就可以用这个去完成修改.
首先 install
npm install patch-package
然后生成补丁文件
npx patch-package vue-pdf/pdfjs-dist
注意有好多文章说的是npx patch-package pdfjs-dist 但是vue-pdf引用的是它本身node-modules下的pdfjs-dist,要是单纯按照他们说的npx patch-package pdfjs-dist 或者 npx patch-package vue-pdf你会发现它会监测到没有任何改动! 毕竟你修改的是vue-pdf中node-modules的文件
嵌套的程序包
如果试图在特定处修补包,如:node_modules/package/node_modules/另一个包,在包名称之间加一个 / 才可监测到包中引用的包的修改
npx patch-package package/another-package
这样才会生成 vue-pdf++pdfjs-dist+2.6.347.patch 这个修改补丁
上面会显示你所做的修改,同时你也要在 package.json 的脚本scripts中添加
后续执行 npm install 或 yarn install 命令时,会自动为依赖包打补丁
"scripts": {
...
"postinstall": "patch-package"
},
这样其他人在拉取代码的时候install就会同步你的修改啦
其他
打包的时候修改文件可能在外部
原来 worker-loader 的默认打包路径是在 dist 根目录下,为了统一我们想把它打包到 dist/static/js 目录下,我们依旧通过更改源码的方式是设置路径。
找到 node_modules/worker-loader/dist/index.js 文件,然后把:
const filename = _loaderUtils2.default.interpolateName(this, options.name || '[hash].worker.js', {
context: options.context || this.rootContext || this.options.context,
regExp: options.regExp
});
更改为我们想要的路径
const filename = _loaderUtils2.default.interpolateName(this, options.name || 'static/js/[hash].worker.js', {
context: options.context || this.rootContext || this.options.context,
regExp: options.regExp
});
最后,再运行 patch-package 生成一个补丁文件:
npx patch-package worker-loader
接着再进行打包编译就会发现文件被移动到 dist/static/js 目录内了(引用自更改 worker-loader 的打包位置)
ok! 完美解决~