快捷導(dǎo)航

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

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

文章介紹了使用vue-pdf@4.3.0時(shí)遇到的上傳特殊PDF文件無(wú)法正常預(yù)覽的問題,通過查看控制臺(tái)報(bào)錯(cuò)信息,發(fā)現(xiàn)是因?yàn)槿鄙僮煮w導(dǎo)致的,解決方法是修改pdfjs-dist庫(kù)的代碼,注釋掉隱藏電子簽章的代碼,為了在生產(chǎn)環(huán)境中應(yīng)用這個(gè)修改,使用了patch-package插件,感興趣的朋友一起看看吧

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

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

1、查看控制臺(tái)報(bào)錯(cuò)信息

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 庫(kù)的，而它依賴的pdfjs-dist庫(kù)的版本不支持顯示簽章

在 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)就是隱藏電子簽章，注釋這段代碼去修復(fù)這個(gè)問題了。

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

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

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

執(zhí)行后會(huì)在項(xiàng)目根目錄生成patches文件

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

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

后續(xù)執(zhí)行 npm install 時(shí)，會(huì)自動(dòng)為依賴包打補(bǔ)丁

5、worker-loader 的默認(rèn)打包路徑是在 dist 根目錄下，為了統(tǒng)一我們想把它打包到 dist/static/js 目錄下，我們依舊通過更改源碼的方式是設(shè)置路徑。

找到 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
});

最后，再運(yùn)行 npx patch-package worker-loader，生成worker-loader+2.0.0.patch補(bǔ)丁包