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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/61447.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【 模型】 开源图像模型Stable Diffusion入门手册

开源图像模型Stable Diffusion入门手册 引言硬件要求环境部署手动部署整合包 模型装配更新显存优化插件配置文生图最简流程提示词使用技巧结语 引言 Stable Diffusion是一款在2022年发布的深度学习文字到图像生成模型。它能够根据文字描述生成详细的图像,并且在几秒…

跨境电商API接口:数据采集与业务集成的核心

跨境电商作为全球贸易的重要组成部分,正随着互联网技术的发展而迅速增长。在这个过程中,API接口扮演了至关重要的角色,它们不仅提高了运营效率,还增强了安全性和用户体验。本文将深入探讨跨境电商API接口的应用、重要性以及面临的…

【linux013】文件操作命令篇 - less 命令

文章目录 less 命令1、基本用法2、常见选项3、交互式键盘命令4、举例5、注意事项 less 命令 less 是 Linux 中强大的文件分页查看命令,比 more 更灵活且功能更强大。less 支持双向滚动、搜索、显示大文件等功能,适用于查看文件内容或管道输出的大量文本…

力扣 无重复字符的最长字串-3

无重复字符的最长字串-3 class Solution { public:// 解决方法:双指针int lengthOfLongestSubstring(string s) { // 如果字符串为空,直接返回0if (s.length() 0)return 0;// 如果字符串不为空,字符串每个字符都不同的情况下,最…

如何在Ubuntu当中利用CloudCompare软件进行点云配准拼接?

1.首先需要安装相应的cloudcompare软件,以下有两种方式:第一种直接在ubuntu的软件商店里搜索CloudCompare软件进行install,我这里已经安装完毕。 方式二:可以直接原码安装: github地址: https://github.co…

贴贴,一款windows剪切板管理软件

贴贴,一款windows剪切板管理软件 软件下载官网 https://tietieapp.com 软件界面 软件界面简洁、信息展示清晰。软件会自动记录你复制过的内容。包括哪个软件复制的、复制的时间。支持图片、文本、文件等多种格式。支持持久化,电脑重启记录仍然存在。支持…

泷羽sec学习打卡-html基础

声明 学习视频来自B站UP主 泷羽sec,如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 关于云技术基础的那些事儿-捕获帅照 html基础什么是html? 常用的html标签html示例 css基础什…

RocketMQ的使⽤

初识MQ 1.1.同步和异步通讯 微服务间通讯有同步和异步两种⽅式: 同步通讯:就像打电话,需要实时响应。 异步通讯:就像发邮件,不需要⻢上回复。 两种⽅式各有优劣,打电话可以⽴即得到响应,但…

java 字符 ASCII码 详解

在 Java 中,字符 (char) 和 ASCII 码的关系是通过 Unicode 字符集建立的。以下是 Java 中字符与 ASCII 码相关的详解。 1. 什么是 ASCII 和 Unicode? ASCII (American Standard Code for Information Interchange) ASCII 码 是一种字符编码标准&#x…

初试无监督学习 - K均值聚类算法

文章目录 1. K均值聚类算法概述2. k均值聚类算法演示2.1 准备工作2.2 生成聚类用的样本数据集2.3 初始化KMeans模型对象,并指定类别数量2.4 用样本数据训练模型2.5 用训练好的模型生成预测结果2.6 输出预测结果2.7 可视化预测结果 3. 实战小结 1. K均值聚类算法概述…

JSON,事件绑定

文章目录 JSON事件绑定输入框input和div的内容返回获取dom元素数组还是单个对象for循环为什么要写const那一行,直接写 hobbys[index].checked true;可以吗const不是常量吗,为什么用const声明的element的属性值可以改变? 黑马学习笔记 JSON 定…

学习HTML第三十一天

学习文章目录 七. 普通按钮八. 文本域九.下拉框 七. 普通按钮 注意点:普通按钮的 type 值为 button ,若不写 type 值是 submit 会引起表单的提交 八. 文本域 常用属性如下: rows 属性:指定默认显示的行数,会影响文…

基于Multisim的汽车尾灯控制电路设计与仿真

1、电路由四个按键控制,分别对应左转、右转、刹车和检查。 2、当左转或右转键按下时,左侧或右侧的 3个汽车尾灯按照左循环或右循环的顺!2/3 点亮,点亮时间为 1秒。 3、当刹车时,所有的尾灯同时闪烁,闪烁时间为1秒。 4、当检查时…

7天掌握SQL - 第三天:MySQL实践与索引优化

目录 安装MySQL创建数据库和表结构SQL语句实操练习MySQL高级特性索引设计与优化总结 1. 安装MySQL 1.1 下载与安装 MySQL可以通过官方网站下载安装包。以下是安装MySQL的基本步骤: 访问MySQL官方网站 MySQL Downloads。选择适合您操作系统的版本进行下载。安装…

osg、osgearth简介及学习环境准备

一、osg简介(三维场景图渲染与调度引擎) OSG是Open Scene Graphic 的缩写,OSG于1997年诞生于以为滑翔机爱好者之手,Don burns 为了对滑翔机的飞行进行模拟,对openGL的库进行了封装,osg的雏形就这样诞生了&…

小程序-使用 iconfont 图标库报错:Failed to load font

官方默认可以忽略此错误,在清除缓存后首次刷新会显示此错误,重新渲染错误消失 解决方法: 在 iconfont 图标库选择项目设置 选中 Base64 保存,重新点击链接 -> 复制代码到项目中 操作步骤:

GEE 训练教程——Sentinel-1的卷积(核函数)的分析和可视化

目录 简介 函数 convolve(kernel) Arguments: Returns: Image ee.Kernel.fixed(width, height, weights, x, y, normalize) Arguments: Returns: Kernel 代码解释 代码 结果 简介 GEE 训练教程——Sentinel-1的卷积(核函数)的分析和可视化 函数 convolve(kerne…

Stable Diffusion的解读(二)

Stable Diffusion的解读(二) 文章目录 Stable Diffusion的解读(二)摘要Abstract一、机器学习部分1. 算法梳理1.1 LDM采样算法1.2 U-Net结构组成 2. Stable Diffusion 官方 GitHub 仓库2.1 安装2.2 主函数2.3 DDIM采样器2.4 Unet 3…

13. 【.NET 8 实战--孢子记账--从单体到微服务】--简易权限--完善TODO标记的代码

这篇文章特别短,短到可以作为一篇文章的一个章节,那让我们开始吧 一、编写代码 我们在代码中标记了大量的TODO标记,并且注明了这里暂时写死,等权限和授权完成后再改为动态获取这句话。那么到目前为止和权限有关的代码已经完成了…

Rust “xxx“.to_string()和Rust String::from(“xxx“)区别(将字符串字面量(str类型)转换为String类型)

文章目录 Rust "xxx".to_string()和Rust String::from("xxx")区别1. .to_string()(能够将任何可以显示的类型(如数字、结构体等)转为字符串)2. String::from()区别总结:性能:示例对比&…