解决vue-pdf的签章不显示问题

在使用vue-pdf @4.3.0时发现上传一般的普通pdf正常预览,但是上传带有红头文件的和和特殊字体的pdf无法正常内容显示,文字丢失问题。

1、查看控制台报错信息

2、缺少字体原因

javascript 复制代码
    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 发现有这么一段代码:

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

其中 _this3.setFlags(_util.AnnotationFlag.HIDDEN)就是隐藏电子签章,注释这段代码去修复这个问题了。

4、生产环境同步去修改,用到另一个插件 patch-package

它的作用就是打补丁, 当某些模块有bug的时候, 先在依赖包修改,在执行以下命令

javascript 复制代码
npm install patch-package

npx patch-package pdfjs-dist

执行后会在项目根目录生成patches文件


同时你也要在 package.json 的脚本scripts中添加

javascript 复制代码
"scripts": {
    ...
    "postinstall": "patch-package"
 },

后续执行 npm install 时,会自动为依赖包打补丁

5、worker-loader 的默认打包路径是在 dist 根目录下,为了统一我们想把它打包到 dist/static/js 目录下,我们依旧通过更改源码的方式是设置路径。

找到 node_modules/worker-loader/dist/index.js 文件,然后把:

javascript 复制代码
const filename = _loaderUtils2.default.interpolateName(this, options.name || '[hash].worker.js', {
    context: options.context || this.rootContext || this.options.context,
    regExp: options.regExp
});

改为我们想要的路径

javascript 复制代码
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补丁包

相关推荐
Sheldon一蓑烟雨任平生2 小时前
Vue3 依赖注入(provide 和 inject)
vue.js·inject·provide·vue3 依赖注入·跨级别组件通信
孤狼warrior3 小时前
爬虫进阶 JS逆向基础超详细,解锁加密数据
javascript·爬虫
前端炒粉3 小时前
18.矩阵置零(原地算法)
javascript·线性代数·算法·矩阵
listhi5204 小时前
利用React Hooks简化状态管理
前端·javascript·react.js
paopaokaka_luck4 小时前
基于SpringBoot+Vue的助农扶贫平台(AI问答、WebSocket实时聊天、快递物流API、协同过滤算法、Echarts图形化分析、分享链接到微博)
java·vue.js·spring boot·后端·websocket·spring
华仔啊4 小时前
这个Vue3旋转菜单组件让项目颜值提升200%!支持多种主题,拿来即用
前端·javascript·css
Sheldon一蓑烟雨任平生5 小时前
Vue3 重构待办事项(主要练习组件化)
vue.js·重构·vue3·组件化练习
CsharpDev-奶豆哥5 小时前
JavaScript性能优化实战大纲
开发语言·javascript·性能优化
yume_sibai8 小时前
TS 常用内置方法
前端·javascript·typescript
新知图书8 小时前
ArkTS语言、基本组成与数据类型
前端·javascript·typescript