使用PDF.js如何显示pdf文件的电子签章

最新推荐文章于 2024-03-20 09:13:09 发布
最新推荐文章于 2024-03-20 09:13:09 发布
阅读量1.9w 收藏 2
点赞数 3
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zt_star/article/details/72782174
版权

将pdf.js源码下载后，在build/pdf.worker.js文件中找到如下图所示的代码段


将this.setFlags(AnnotationFlag.HIDDEN);注释掉就会显示电子签章，反之不显示。


PS：如果有的同学源码解压过后没有build文件夹，可以从这下载http://files.cnblogs.com/files/xiangliuyunyang/build.zip。

zt_star
关注
专栏目录
使用pdf.js在web页面展示pdf文件
总有一天，你的日积月累，会成为别人的望尘莫及
12-15 9892
最近弄的项目中需要在线展示PDF文件，以前用的是Adobe PDF阅读器直接在浏览器端打开的，这要求客户端必须安装这个软件，若是没有安装就不能在线预览了。为了解决这个问题，最终决定用pdf.js来实现预览功能。   1、PDF.js下载： 下载链接：http://mozilla.github.io/pdf.js/ 下载下来的压缩包包含两个文件夹：build和web，打开web文件夹下的v...
vue2-pdfjs 2.0.943 版本 同屏比对功能
最新发布
weixin_44735745的博客
08-01 300
拿代码直接用
pdf.js预览pdf文件并且使用进行图片签章功能
qq_39822531的博客
02-26 717
来自这位大佬：https://blog.csdn.net/a15297701931/article/details/135062029。2.pdf.js中的getDocument方法使用的是data，pdf的arraybuffer格式。1.删减了放缩功能，放开了调整图章大小的功能，前者和后者功能冲突。3.下面的/deep/调整成了::v-deep。首先按照上面这个链接引入对应包。
pdfjs预览显示电子签名
07-26
PDFJS预览pdf时无法显示电子签名，亲测本方案完美解决
显示签章pdf.worker.rar和pdf.js
04-13
pdf.worker.js已经修改好了，可直接显示签章，移动端pdf预览显示签名显示签章
js 返回上一页面_pdf.js实战，含水印、电子签章解决方案
weixin_40008033的博客
11-26 432
项目涉及到移动端查看电子合同的问题，前前后后试了三种方案，真是一步一个坑，三种方案各有各的优点，不水，直接上代码，按照自己的需求选择。一、pdf-vue直接使用vue-pdf插件，核心的代码是pdf.js，只不过就是自己封装了一下，优点是方便快捷，缺点是无法加载电子签章。github地址： https://github.com/FranckFreiburger/vue-pdf#readme1、np...
iOS 使用pdf.js解决电子签章
12-04
具体操作文章：https://www.jianshu.com/p/bbc3a8f789ac
pdf.js上传有盖章文件盖章不显示
ZYX10077的博客
01-28 3860
pdf.js上传有盖章文件盖章不显示 我在开发中,遇到了一个很头痛的问题,就是使用了pdf.js插件出现了上传了有盖章的文件,盖章不显示的问题,这到底是什么原因尼,找了很多资料后来发现是pdf.js这个文件里面自动处理了,不显示盖章;下面就是解决方案 第一步找到pdf.worker.js文件,例如我的是放这里 第二步 点进去这个文件,找到到30527行代码,把相应代码注释掉保存即可,如下图 这样就把这个问题解决拉,希望可以帮助到遇到这样问题的小伙伴! ...
iOS pdf.js加载电子签章网络链接和本地资源都适用
11-13
对于本地资源，我们可以将PDF文件保存在应用的资源目录下，然后通过WKWebView加载本地HTML，该HTML文件中设置JavaScript来读取并显示PDF。 为了实现电子签章的交互，我们需要额外的工作。例如，用户可能需要在界面...
iOS pdf.js加载电子签章网络链接和本地资源都可以用
05-31
8. **调试与测试**：在实际应用中，开发者需要进行详尽的测试，确保 PDF.js 在各种设备和系统版本上都能正确显示电子签章和其他复杂内容。这可能涉及到不同的屏幕尺寸、操作系统版本以及网络环境。 综上所述，PDF....
笔记-pdf.js 不展示签章
weixin_43920944的博客
10-28 779
在pdf.worker.js该文件下’Sig’这个参数所在地，注释掉相应的代码。
pdf 加 书签 js文件
03-03
用来给pdf加书签，操作方便实现简单 ，只需要覆盖下一个js文件就可以了
vue+pdf.js 印章签署完后鼠标滑过显示签章信息
朝花夕拾的博客
08-13 2357
效果图 核心思想： pdf.js签署印章，搜索相关文档就好 签署完后，每一页可能有多个印章，将这些印章跟随鼠标移动显示印章信息 首先思考将这些印章的提示信息放在生成的div中，然后添加鼠标移动事件，根据页数和鼠标移动的坐标判断是否经过了某一页的印章 核心代码 if(this.sginData!=null){ for(var key in this.sginData){ console.log('kye====', key) for(var i=0 ; i < thi.
前端预览pdf 印章不显示问题
tanghuan0827的博客
01-11 1706
就可以顺利解决电子签名，印章不显示问题。找到pdf.worker.js。
pdf.js 印章不显示问题
ADH100899的博客
03-20 521
注释掉此段代码即可显示签章。
pdf.js实战，含水印、电子签章解决方案
高先生的猫
05-28 6190
项目涉及到移动端查看电子合同的问题，前前后后试了三种方案，真是一步一个坑，三种方案各有各的优点，不水，直接上代码，按照自己的需求选择。 一、pdf-vue 直接使用vue-pdf插件，核心的代码是pdf.js，只不过就是自己封装了一下，优点是方便快捷，缺点是无法加载电子签章。 github地址： github.com/FranckFreib… 1、npm install pdf-vue --save 2、template代码 <template> <div class="
解决PDF预览时，电子签章、日期等不显示问题
商务合作 / 项目定制开发 / 前端一对一培训、答疑
11-23 3134
那到底是哪里出了问题呢，我再一次考虑是不是因为日期字体等文件没有请求成功的问题。最终发现就是在加载日期字体时，出了问题（没有报错，但是无法预览）。免费答疑，行业深潜多年的技术牛人帮你解决bug。找到PDF引用cmaps的文件，将public去除，重新打包即可在开发和生产环境正常看到电子签章了。继续排查，发现通过接口下载下来的接口是有日期的，这个侧面也证明数据是没问题的。，但是依然没有显示，问题是浏览器控制台也没有报错。根据网上搜索，排查，我先看看，对比正确的路径，发现原来是多了public路径
Pdf.js 解决电子印章问题
dxyzhbb的博客
03-24 2176
build/pdf.worker.js中有40280行有这样一段代码，注释掉就显示电子签章，不注释就隐藏电子签章
预览PDF无法显示签章文件的解决办法
weixin_50418353的博客
08-09 4626
通过网上搜索资料，决定使用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.将文件引入项目根路径，链接如下。...
如何在网页中使用PDF.js显示PDF文件？
04-10
在网页中使用PDF.js显示PDF文件可以通过以下步骤实现： 1. 下载PDF.js库：首先，你需要下载PDF.js库。你可以从GitHub上的PDF.js仓库中获取最新版本的库文件。 2. 引入PDF.js库：将下载的PDF.js库文件解压，并将其中的`pdf.js`和`pdf.worker.js`文件复制到你的项目目录中。然后，在你的HTML文件中使用`<script>`标签引入这两个文件。 ```html <script src="path/to/pdf.js"></script> <script src="path/to/pdf.worker.js"></script> ``` 3. 创建一个容器元素：在HTML文件中创建一个用于显示PDF文件的容器元素，例如一个`<div>`元素。 ```html <div id="pdfContainer"></div> ``` 4. 编写JavaScript代码：使用JavaScript代码加载和显示PDF文件。首先，获取容器元素的引用，并创建一个PDF.js的实例。 ```javascript var container = document.getElementById('pdfContainer'); var pdfInstance = PDFJS.getDocument('path/to/pdf/file.pdf'); ``` 5. 渲染PDF页面：使用PDF.js实例的`getPage()`方法获取PDF文件的页面，并将其渲染到容器元素中。 ```javascript pdfInstance.getPage(1).then(function(page) { var canvas = document.createElement('canvas'); container.appendChild(canvas); var context = canvas.getContext('2d'); var viewport = page.getViewport({ scale: 1 }); canvas.width = viewport.width; canvas.height = viewport.height; page.render({ canvasContext: context, viewport: viewport }); }); ``` 以上代码中的`'path/to/pdf/file.pdf'`应替换为你要显示的PDF文件的路径。
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值