为什么火狐浏览器的PDF.js内置阅读器无法正确显示发票的电子签章?

星萱大大_8719

星萱大大_8719

2026-06-06

641人浏览

原创

火狐pdf.js默认隐藏【sig】签名字段导致电子签章不显示,需确认pdfjs.enabled为true且pdfjs.disabled为false,修改pdf.worker.js中if(data.fieldtype==='sig')设hidden的逻辑,iis还需添加.bcmap和.properties mime类型。

为什么火狐浏览器的pdf.js内置阅读器无法正确显示发票的电子签章?

火狐浏览器的PDF.js内置阅读器无法正确显示发票电子签章,是因为其默认将类型为 【Sig】 的签名注释字段主动隐藏,导致台头、公章、数字签名等关键视觉元素被过滤掉,发票预览时出现空白印章区域或完全缺失签章。

确认PDF.js是否已启用并正常加载

在地址栏输入 about:config → 点击“接受风险并继续” → 搜索 pdfjs.enabled → 确保值为 true;再搜索 pdfjs.disabled → 确保值为 false。若任一参数为 false 或未定义,PDF.js可能根本未启动,后续所有修复均无效。

定位并修改pdf.worker.js中的签名隐藏逻辑

电子签章不显示的根本原因藏在 pdf.worker.js 文件中。该文件在解析到签名字段(fieldType === 'Sig')时,会强制设置 HIDDEN 标志位,使渲染层跳过绘制。

方法一:直接注释掉隐藏代码(适用于 v1.x 至 v2.11.x 多数版本)
用文本编辑器打开项目中实际加载的 pdf.worker.js → 全局搜索 if (data.fieldType === 'Sig') → 找到形如以下三行的代码块:
if (data.fieldType === 'Sig') {
  this.setFlags(_util.AnnotationFlag.HIDDEN);
}

将其整段注释掉(前后加 //),保存并刷新页面。

page-agent 浏览器控制(CDP)
page-agent 浏览器控制(CDP)

使用 page-agent CLI(CDP)控制浏览器;CLI只能通过 GitHub Release 的 .tgz 安装,npm 官方包暂未发布。

下载

方法二:添加白名单判断(更安全,推荐用于生产环境)
在同一位置,将原逻辑替换为:
if (data.fieldType === 'Sig') {
  // 保留签名字段数据,不设隐藏标志
  return new WidgetAnnotation(parameters);
}

这能绕过默认拦截,同时避免因字段结构异常引发的解析中断。

补充IIS服务器配置(仅限Windows部署场景)

若PDF来自内网系统且通过IIS发布,还需检查MIME类型是否缺失:
① 打开IIS管理器 → 选择服务器节点 → 双击“MIME类型” → 点击右侧“添加”
② 扩展名填 .bcmap,MIME类型填 application/octet-stream
③ 再添加一条:.properties → text/plain
【缺少这两项会导致部分发票字体与本地化资源加载失败,间接影响签章区域渲染】

验证修复效果

重启火狐浏览器 → 拖入同一张含电子签章的发票PDF → 观察印章是否完整呈现、位置是否准确、有无翻转或错位;若仍异常,尝试在地址栏访问 about:pdfjs/ 查看控制台报错,重点排查 Sig 字段解析日志。

相关专题

更多
js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

2023.06.20

4256

8

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

2023.07.28

1315

5

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.03

1698

5

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

2023.08.17

9803

11

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

2023.09.01

940

4

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.04

2604

5

Js中concat和push的区别
Js中concat和push的区别

Js中concat和push的区别:1、concat用于将两个或多个数组合并成一个新数组,并返回这个新数组,而push用于向数组的末尾添加一个或多个元素,并返回修改后的数组的新长度;2、concat不会修改原始数组,是创建新的数组,而push会修改原数组,将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.14

1529

5

js截取字符串的方法介绍
js截取字符串的方法介绍

JavaScript字符串截取方法,包括substring、slice、substr、charAt和split方法。这些方法可以根据具体需求,灵活地截取字符串的不同部分。在实际开发中,根据具体情况选择合适的方法进行字符串截取,能够提高代码的效率和可读性 。

2023.09.21

4469

3

js生成随机数方法
js生成随机数方法

JavaScript生成随机数的方法,包括使用Math.random()方法生成指定范围内的随机整数、生成随机字符串和生成随机颜色。根据具体需求,可以选择适合的方法来生成随机数,以实现各种功能 。

2023.09.25

2575

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WEB前端教程【HTML5+CSS3+JS】
WEB前端教程【HTML5+CSS3+JS】

共101课时 | 21万人学习

JS进阶与BootStrap学习
JS进阶与BootStrap学习

共39课时 | 4.8万人学习