解決vue-pdf的簽章不顯示問題記錄

更新時間：2024年11月23日 11:36:45 作者：join8

文章介紹了使用vue-pdf@4.3.0時遇到的上傳特殊PDF文件無法正常預覽的問題,通過查看控制臺報錯信息,發(fā)現(xiàn)是因為缺少字體導致的,解決方法是修改pdfjs-dist庫的代碼,注釋掉隱藏電子簽章的代碼,為了在生產(chǎn)環(huán)境中應用這個修改,使用了patch-package插件,感興趣的朋友一起看看吧

1、查看控制臺報錯信息
2、缺少字體原因
3、vue-pdf 是依賴于 pdfjs-dist 庫的，而它依賴的pdfjs-dist庫的版本不支持顯示簽章
4、生產(chǎn)環(huán)境同步去修改，用到另一個插件 patch-package
5、worker-loader 的默認打包路徑是在 dist 根目錄下，為了統(tǒng)一我們想把它打包到 dist/static/js 目錄下，我們依舊通過更改源碼的方式是設置路徑。

在使用vue-pdf @4.3.0時發(fā)現(xiàn)上傳一般的普通pdf正常預覽，但是上傳帶有紅頭文件的和和特殊字體的pdf無法正常內(nèi)容顯示，文字丟失問題。

1、查看控制臺報錯信息

2、缺少字體原因

    getNumPages(url) {
      var loadingTask = pdf.createLoadingTask({
         url: url,
         //引入pdf.js字體
         cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@4.8.69/cmaps/',
         cMapPacked: true
      });
      this.url = loadingTask;
      loadingTask.promise.then((res) => {
        this.numPages = res.numPages;
      })
    }

3、vue-pdf 是依賴于 pdfjs-dist 庫的，而它依賴的pdfjs-dist庫的版本不支持顯示簽章

在 node_modules/pdfjs-dist/es5/build/pdf.worker.js 發(fā)現(xiàn)有這么一段代碼：

if (data.fieldType === 'Sig') {
  data.fieldValue = null;
 // _this3.setFlags(_util.AnnotationFlag.HIDDEN);
}

其中 _this3.setFlags(_util.AnnotationFlag.HIDDEN)就是隱藏電子簽章，注釋這段代碼去修復這個問題了。

4、生產(chǎn)環(huán)境同步去修改，用到另一個插件 patch-package

它的作用就是打補丁, 當某些模塊有bug的時候, 先在依賴包修改，在執(zhí)行以下命令

npm install patch-package
npx patch-package pdfjs-dist

執(zhí)行后會在項目根目錄生成patches文件

同時你也要在 package.json 的腳本scripts中添加

"scripts": {
    ...
    "postinstall": "patch-package"
 },

后續(xù)執(zhí)行 npm install 時，會自動為依賴包打補丁

5、worker-loader 的默認打包路徑是在 dist 根目錄下，為了統(tǒng)一我們想把它打包到 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
});

最后，再運行 npx patch-package worker-loader，生成worker-loader+2.0.0.patch補丁包