【Vue】vue-pdf 库第三方签章不显示的解决方法

【vue && vue-pdf】pdf展示及解决签章不显示的问题 1.下载 npm i vue-pdf //我使用的是4.2.0版本,版本可能影响问题的解决 npm i vue-pdf@4.2.0 2.作为组件引入 import pdf from 'vue-pdf'; export default { components:{ pdf } } 3.使用 定义pages变量稍后用来获取pdf的页数 <pdf v-for="i in pages" :key="i" :src="pdfUrl" ... 阅读详情

需求场景

预览 pdf 并展示 pdf 中的第三方签章

问题描述

签章无法显示

解决方法

1.找到 vue-pdf 文件夹

首先我们要找到 vue-pdf 源代码的文件夹,找到关于 pdfjs-list 的引用文件地址。

image

2.pdfjs-list 源码修改

这里网上很多解决方法都很坑,只是说 node_modules\pdfjs-dist\build\pdf.worker.js,但是 vue-pdf 使用的是它 es5 这个文件夹下的文件!!!!我没注意一直修改无效!!!!!这就需要我们按照上面的路径去查看源代码引用的具体路径,版本不一样可能都不同,所有还是的得自己去找啊!(血的教训,浪费了我好多时间,也有可能是我自己不仔细看吧)

image

下面就是找到下面的代码注释掉就行,完美解决!

if (data.fieldType === "Sig") {
      // data.fieldValue = null;
      // this.setFlags(_util.AnnotationFlag.HIDDEN);
    }

参考文章

如何解决 “vue-pdf” 中预览出现 印章无法展示 中文无法展示乱码情况 详解

vue使用Fabric和pdfjs完成合同签章及批注 文章摘要:本文详细介绍了合同签章及批注模块的核心难点和功能点,主要涉及PDF渲染与交互、电子签章系统、文字批注系统、文件处理、性能优化、业务逻辑复杂性及浏览器兼容性等方面。通过使用pdfjs-dist库和Fabric.js等技术,实现了PDF的多页动态渲染、电子签章的拖拽与缩放、文字批注的富文本交互等功能。文章还提到了前期准备和主要代码实现,包括引入插件、处理签章图片上传、文件下载等操作,并强调了状态验证、数据转换和内存管理等关键问题。 阅读详情

相关推荐

vue项目中pdf.js实战,含水印、电子签章解决方案

项目涉及到移动端查看电子合同的问题,前前后后试了三种方案,真是一步一个坑,三种方案各有各的优点,不水,直接上代码,按照自己的需求选择。 一、pdf-vue 直接使用vue-pdf插件,核心的代码是pdf.js,只不过就是自己封装了一下,优点是方便快捷,缺点是无法加载电子签章。 github地址: https://github.com/FranckFreiburger/vue-pdf#readme 1、npm install pdf-vue --save 2、template代码 <template&g

weixin_42140041的博客 5092

vue-pdf的电子签章不显示问题

注意有好多文章说的是npm patch-package pdfjs-dist 但是vue-pdf引用的是它本身node-modules下的pdfjs-dist,要是单纯按照他们说的npm patch-package pdfjs-dist 或者 npm patch-package vue-pdf你会发现它会监测到没有任何改动!毕竟你修改的是vue-pdf中node-modules的文件。这是因为现 vue-pdf 是依赖于 pdfjs-dist 库的,而它依赖的pdfjs-dist库的版本不支持显示签章.

java楠的博客 2337

Apple Pay不能添加卡,不一定是卡的问题,有可能是设备的问题

Apple Pay不能添加卡,不一定是卡的问题,有可能是设备的问题。

wyxtx的博客 3440

vue-pdf不显示电子签章

vue-pdf版本号4.1.0,查看合同类的pdf时显示不出来电子签名,pdf格式是后端返回的base64位格式的; 解决方法:找到node_modules包里的pdfjs-dist/es5/build/pdf.worker.js文件,找到下列代码注释掉即可 _this3.setFlags(_util.AnnotationFlag.HIDDEN); 不过因为是修改的node包,再次install的时候会把注释覆盖掉,解决这个问题也很简单: 通过命令安装 patch-package (npm

LingSnow1019的博客 3928

芯片测试中的DC与AC模式详解:如何选择最适合你的测试方案?

本文深入解析了芯片测试中DC(直流)与AC(交流)模式的核心差异与互补性。DC测试关注静态电气特性,如固定型故障;而AC测试则聚焦于芯片在额定工作速度下的动态时序行为。文章从VLSI设计、电路模块、成本约束、可测试性设计和应用场景五大维度,提供了如何根据工艺节点、工作频率及具体需求,在testMode配置、时钟复位策略和输入输出接口设计中,平衡两种测试模式以制定最优方案的决策框架。

bb456的博客 1088

【系统分析师】2025年下半年真题:综合知识-答案及详解(回忆版)

本文摘要包含系统分析师考试相关题目解析,主要涵盖软件工程、数据库、网络协议和项目管理等知识点。内容包括:软件再工程与逆向工程的区别(D);GNU GPL开源协议特性(A);TCP/IP协议分层(A、B);数据库范式判定(A、B);前导图进度管理工具(C);系统规划中的数据类识别方法(B、D);关系代数除运算(C);CMM优化级特征(A);回归测试重要性(C)。这些解析帮助理解核心概念和考试重点。

数据知道的博客 6720

vue-pdf插件预览pdf不显示印章和电子签名问题

vue-pdf插件预览pdf不显示印章和电子签名问题

nuanyang1233的博客 5369

【深度学习时间序列预测案例】零基础入门经典深度学习时间序列预测项目实战(附代码+数据集+原理介绍)

本专栏整理了《深度学习时间序列预测案例》,内包含了各种不同的基于深度学习模型的时间序列预测方法,例如LSTM、GRU、CNN(一维卷积、二维卷积)、LSTM-CNN、BiLSTM、Self-Attention、LSTM-Attention、Transformer等经典模型,包含项目原理以及源码,每一个项目实例都附带有完整的代码+数据集。

优快云 精品推荐 4万+

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

5、worker-loader 的默认打包路径是在 dist 根目录下,为了统一我们想把它打包到 dist/static/js 目录下,我们依旧通过更改源码的方式是设置路径。在使用vue-pdf @4.3.0时发现上传一般的普通pdf正常预览,但是上传带有红头文件的和和特殊字体的pdf无法正常内容显示,文字丢失问题。3、vue-pdf 是依赖于 pdfjs-dist 库的,而它依赖的pdfjs-dist库的版本不支持显示签章。4、生产环境同步去修改,用到另一个插件 patch-package。

米老头 1808

【异常】安装hermes-agent时提示GnuTLS recv error (-110): The TLS connection was non-properly terminated.

Git克隆仓库时出现TLS连接异常报错的解决方案摘要: 当执行git clone命令时遇到"GnuTLS recv error (-110)"报错,通常由网络不稳定、缓冲区不足或证书验证问题导致。主要解决方案包括:1)增大Git HTTP缓冲区(git config --global http.postBuffer 524288000);2)使用GitHub镜像站加速克隆;3)临时禁用SSL验证进行测试;4)检查并调整代理配置;5)改用SSH协议克隆。建议优先尝试增大缓冲区和镜像站方案,

奶爸的编程之路,也就一周冷个三天 1352

借助生成式 AI 加快创作速度,通过快速构建 Omniverse 扩展程序,您可以直接在 USD Composer 中连接首选的生成式 AI 智能体并与之交互。或者,您也可以使用由 LLM 提供支持的

通过快速构建 Omniverse 扩展程序,您可以直接在 USD Composer 中连接首选的生成式 AI 智能体并与之交互。或者,您也可以使用由 LLM 提供支持的 OpenUSD 开发方法,为您的工作流程提供强劲助力。

pvmsmfchcs的博客 683

使用vue-pdf预览pdf和解决pdf电子签章显示问题

使用vue-pdf预览pdf和解决pdf电子签章显示问题 1.npm install vue-pdf 2.在页面使用vue-pdf <template> <div class="pdf1"> <Pdf v-for="i in numPages" :key="i" :src="src" :page="i" /> </div> </template> <script> import Pdf from "vue-pdf";

weixin_42523999的博客 7639

微调实操一: 增量预训练(Pretraining)

《微调入门篇:大模型微调的理论学习》我们对大模型微调理论有了基本了解,这篇结合我们现实中常见的场景,进行大模型微调实操部分的了解和学习,之前我有写过类似的文章《实践篇:大模型微调增量预训练实践(二)》利用的MedicalGPT的源码在colab进行操作, 由于MedicalGPT代码比较难以理解,而且模型只能从hugging face上下载,对于一些国内服务器无法访问,我重构了代码,让训练代码更有可读性,并参考LLAMAFactory的项目,增加了modelscope上下载模型,轻松在国内服务器运行.

youbingchen的博客 6993

vue-pdf 在线预览pdf(pdf地址或base64pdf)解决电子签章显示问题

使用vue-pdf在线预览pdf 并使得带有电子签章的pdf能够正常预览出来 1.安装vue-pdf npm install vue-pdf //或者 yarn add vue-pdf 2.新建pdf组件 新建AppPdf.vue文件 // AppPdf.vue <template> <div> <pdf v-for="i in numPages" :key="i" :page="i" :src="src"></pdf> &lt

q1ngqingsky的博客 5213

高通MBIM拨号流程简述

高通平台MBIM流程简述

不秃头的程序猿Gabriel的博客 5071

蓝牙模块HM-10手册

蓝牙模块HM-10手册,该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

关于pdf-h5和vue-pdf发票问题显示不全的那些坑

pdfh5 解决发票部分内容不展示

ppfxdj的博客 3592

SIMATIC S7-1200, S7-1500 PID 控制[手册]

SIMATIC S7-1200, S7-1500 PID 控制[手册]

vue-pdf不显示电子签章治标不治本解决方法

转自文章 源文章 最重要的是vue-pdf 版本要对啊!!!!!!!不然找不到对应文件,无法注释: npm install --save vue-pdf@4.1.0 我用的是 4.1.0 版本的,node_module里有这两个文件,注释掉对应语句之后可以显示电子签章! 用更新或更旧的版本,没这两个文件。。一个一个版本试出来的,唉。。。。 但是这应该是治标不治本的方法,如果别人重新npm install或者生产发版是比较严格要重新npm install 打包的。node_module会被覆盖掉..

qq_27312237的博客 2773

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

Vue关于pdf展示问题——第三方电子签章不能正常展示

在项目开发过程中,如果我们只需要展示pdf,那么我们可以选择vue-pdf,可以查看我之前的一篇:https://blog.csdn.net/AnnaF/article/details/105866075。 问题 但是现在的需求是需要用户跟第三方进行电子签名,然后把签完名的合同展示出来,这边就存在一个问题,vue-pdf会屏蔽签名图层,导致合同缺失第三方的电子签名。 解决方案 我们这边使用的是pdfh5插件 下面展示我这边的操作步骤: 1.安装 pdfh5 npm install pdfh5 2.具体使用

AnnaF的博客 3257

pdf.js实战,含水印、电子签章解决方案

项目涉及到移动端查看电子合同的问题,前前后后试了三种方案,真是一步一个坑,三种方案各有各的优点,不水,直接上代码,按照自己的需求选择。 一、pdf-vue 直接使用vue-pdf插件,核心的代码是pdf.js,只不过就是自己封装了一下,优点是方便快捷,缺点是无法加载电子签章。 github地址: github.com/FranckFreib… 1、npm install pdf-vue --save 2、template代码 <template> <div class="

高先生的猫 6826

vue里面使用pdfjs-dist+fabric实现pdf电子签章!!!

使用pdfjs-dist+fabric实现电子签章

欢迎小伙伴们的评论和私信,工作日基本都会上来看看的哈 2万+

vue 开发拖拽签章功能。 主要应用,pdf 合同 盖章, 文件水印, 图文打码

实现原理) 通过拖拽功能实现 (主要vue代码,通过后台将pdf转换 统一格式的图片,前端分页 再不同页面添加签章。) 签章 使用draggable="true" @dragstart="drag($event)" 签章容器 使用 @drop="drop($event, docindex+1)" @dragover="allowDrop($event)" 本源码实现是pdf ...

zhxh0376的专栏 1万+

Vue.js组件开发-解决PDF签章预览问题

‌vue-pdf‌:基于PDF.js的Vue组件,提供响应式PDF查看、WebWorker优化的性能和丰富的API。‌修改pdf.js源码‌:在某些情况下,可能需要修改pdf.js的源码来解决签章显示问题。在Vue.js组件开发中,解决PDF签章预览问题可能涉及多个方面,包括选择合适的PDF预览库、配置PDF.js(或其封装库如vue-pdf)以正确显示签章、以及处理可能的兼容性和性能问题。‌测试不同PDF文件‌:尝试使用不同的PDF文件进行测试,以确定问题是否与特定的PDF文件或签章格式有关。

嵌入式毕设/课设资料清单(速查手册·文档模板·题库,持续更新)→ 见最新文章 1010

vue组件vue-pdf遇到的啃加载pdf替换的内容不显示的问题

最近做移动端项目,封装PDF预览组件,同事开始用的是vue-pdf来做的预览,连连踩坑,基本遇到3个问题: 1、PDF中文不显示 2、PDF签章没显示出来,控制台提示:Warning: Unimplemented widget field type "Sig", falling back to base field type 3、第二次打开PDF的时候会遇到PDF空白的问题,控制台提示:Error during font loading: Failed to execute 'postMessage' on

野蛮女孩的博客 6615

vue-pdf踩坑指南

最近做移动端项目,封装PDF预览组件,同事开始用的是vue-pdf来做的预览,连连踩坑,基本遇到3个问题: 1、PDF中文不显示 2、PDF签章没显示出来,控制台提示:Warning: Unimplemented widget field type "Sig", falling back to base field type 3、第二次打开PDF的时候会遇到PDF空白的问题,控制台提示:Error during font loading: Failed to execute 'postMessage' on

快进小树林的博客 1万+

vue移动端预览pdf功能(可以多页)以及第三方电子签章不能正常展示解决方案(多种)

vue移动端预览pdf功能(可以多页)以及第三方电子签章不能正常展示解决方案(多种) 随着网络的发展,PC端的网站已不能满足人们的需求,人们更喜欢采用移动端进行业务操作。最近公司要求把PC端网站的订单合同签署功能移植到微信端,而不再局限于PC端操作。 对于这样的要求,我们需要了解的是订单合同,协议书之类的一般都属于不可以任意修改的文件(PDF),这样的文件,现在的浏览器基本都支持直接访问的。但是遗...

qq_39584800的博客 1万+

预览PDF无法显示签章文件的解决办法

通过网上搜索资料,决定使用vue插件vue-pdf实现pdf文件预览,vue-pdf封装了原生pdf.js和pdfjs-dist。安卓和ios本地打包的情况下都可以正常显示,但是代码提交后在线上环境打包会将注释的代码自动还原,导致生产环境无法正常展示签名。步骤二 在 node_modules/pdfjs-dist/es5/build/pdf.worker.js 注释掉一行代码。3.注释掉vue-pdf/src/pdfjsWrapper.js中隐藏签名的代码,如下图。1.将文件引入项目根路径,链接如下。...

weixin_50418353的博客 5656
上一篇: 【Vue】如何写一个表格列显隐控制的组件?
下一篇: 【Vue】patch-package 基本使用,给修改的 node_modules 下源码“打补丁”
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值