vue-pdf的电子签章不显示问题

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! 完美解决~