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

ops/2024/11/23 18:36:55/

在使用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-packagenpx 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补丁包


http://www.ppmy.cn/ops/136108.html

相关文章

【大数据学习 | Spark-Core】Spark的分区器(HashPartitioner和RangePartitioner)

之前学过的kv类型上面的算子 groupby groupByKey reduceBykey sortBy sortByKey join[cogroup left inner right] shuffle的 mapValues keys values flatMapValues 普通算子,管道形式的算子 shuffle的过程是因为数据产生了打乱重分,分组、排序、join等…

mysql in查询大数据量业务无法避免情境下优化

在 MySQL 中,IN 查询操作广泛用于从数据库中检索符合条件的多条记录,但当涉及到大数据量的 IN 查询时,性能可能会显著下降。特别是当 IN 子句中的元素数量非常大时,MySQL 需要对每个元素进行匹配,这会导致查询变得非常…

ffmpeg视频滤镜:提取缩略图-framestep

滤镜描述 官网地址 > FFmpeg Filters Documentation 这个滤镜会间隔N帧抽取一帧图片&#xff0c;因此这个可以用于设置视频的缩略图。总体上这个滤镜比较简单。 滤镜使用 滤镜参数 framestep AVOptions:step <int> ..FV....... set frame st…

单片机学习笔记 8. 矩阵键盘按键检测

更多单片机学习笔记&#xff1a;单片机学习笔记 1. 点亮一个LED灯单片机学习笔记 2. LED灯闪烁单片机学习笔记 3. LED灯流水灯单片机学习笔记 4. 蜂鸣器滴~滴~滴~单片机学习笔记 5. 数码管静态显示单片机学习笔记 6. 数码管动态显示单片机学习笔记 7. 独立键盘 目录 0、实现的…

华为IPD流程管理体系L1至L5最佳实践-解读

该文档主要介绍了华为IPD流程管理体系&#xff0c;包括流程体系架构、流程框架实施方法、各业务流程框架示例以及相关案例等内容&#xff0c;旨在帮助企业建立高效、规范的流程管理体系&#xff0c;实现业务的持续优化和发展。具体内容如下&#xff1a; 1. 华为流程体系概述 -…

BY组态-低代码web可视化组件

简介 BY组态是集实时数据展示、动态交互等一体的全功能可视化平台。帮助物联网、工业互联网、电力能源、水利工程、智慧农业、智慧医疗、智慧城市等场景快速实现数字孪生、大屏可视化、Web组态、SCADA等解决方案。具有实时监控、多样、变化、动态交互、高效、可扩展、支持自动…

创建HTTPS网站

每天&#xff0c;我们都会听到网络上发生身份盗窃和数据侵权的案例&#xff0c;这导致用户对自己访问的网站更加怀疑。他们开始更加了解自己将个人信息放在哪里以及信任哪些类型的网站。了解如何使网站使用HTTPS变得比以往任何时候都更加重要。 解读缩略词&#xff1a;HTTP与HT…

从0开始机器学习--Day29--K-means算法以及PCA降维作业

题目1&#xff1a;计算聚类中心点并对图像进行重构 代码&#xff1a; import numpy as np import scipy.io as sio import matplotlib.pyplot as plt from skimage import iodef find_data_type(X, centers):idx []# 聚类中心和样本点不再变化后每个样本点的的类for i in ra…