解决vue-pdf的签章不显示问题记录
更新时间：2024年11月23日 11:36:45 作者：join8
文章介绍了使用vue-pdf@4.3.0时遇到的上传特殊PDF文件无法正常预览的问题,通过查看控制台报错信息,发现是因为缺少字体导致的,解决方法是修改pdfjs-dist库的代码,注释掉隐藏电子签章的代码,为了在生产环境中应用这个修改,使用了patch-package插件,感兴趣的朋友一起看看吧
在使用vue-pdf @4.3.0时发现上传一般的普通pdf正常预览，但是上传带有红头文件的和和特殊字体的pdf无法正常内容显示，文字丢失问题。
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 发现有这么一段代码：
if (data.fieldType === 'Sig') {
data.fieldValue = null;
// _this3.setFlags(_util.AnnotationFlag.HIDDEN);
}其中 _this3.setFlags(_util.AnnotationFlag.HIDDEN)就是隐藏电子签章，注释这段代码去修复这个问题了。
4、生产环境同步去修改，用到另一个插件 patch-package
它的作用就是打补丁, 当某些模块有bug的时候, 先在依赖包修改，在执行以下命令
npm install patch-package npx patch-package pdfjs-dist
执行后会在项目根目录生成patches文件
同时你也要在 package.json 的脚本scripts中添加
"scripts": {
...
"postinstall": "patch-package"
},后续执行 npm install 时，会自动为依赖包打补丁
5、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
});最后，再运行 npx patch-package worker-loader，生成worker-loader+2.0.0.patch补丁包
到此这篇关于解决vue-pdf的签章不显示问题的文章就介绍到这了,更多相关vue-pdf签章不显示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在vue组件通信中其中最常见通信方式就是父子组件之中的通信，而父子组件的设定方式在不同情况下又各有不同。这篇文章主要介绍了Vue---父子组件之间的通信,需要的朋友可以参考下2018-09-09
这篇文章主要给大家介绍了关于vue3 element plus按需引入最优雅的用法,以及关于Element-plus按需引入的一些坑,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-03-03
Vue3响应式原理分析(Proxy(obj,{get(){},set(){}}))
文章详细分析了Vue3的响应式原理,包括Proxy对象的get和set方法,以及双向数据绑定,通过代码示例展示了Vue3和Vue2在set方法上的区别,说明了Vue3能够正确修改值而Vue2不能2025-10-10
文章比较了Vue和React的核心设计理念、响应式系统、虚拟DOM、编译时优化和功能特性,Vue通过编译时优化和响应式系统实现细粒度更新,而React依赖运行时调度（Fiber）实现可控的更新优先级,两者都支持函数式编程,但React在函数式编程方面提供了更高的灵活性2025-02-02
这篇文章主要介绍了Vue-admin-template 添加、跳转子页面问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了Element UI框架中巧用树选择器的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了vue项目打包步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要介绍了vue 实现LED数字时钟效果（开箱即用）,每一个数字由七个元素构成，即每一个segment元素，本文给大家分享实现实例，感兴趣的朋友一起看看吧2019-12-12
Vue build过程取消console debugger控制台信息输出方法详解
这篇文章主要为大家介绍了Vue build过程取消console debugger控制台信息输出方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
Vue 路由过渡是对 Vue 程序一种快速简便的增加个性化效果的的方法，这篇文章主要介绍了Vue实现路由过渡动效的4种方法，感兴趣的可以了解一下2021-05-05
最新评论