在Angular项目中引入pdf.js，解决电子签名不显示

技术标签： Angular 一些小问题前端 Angualr typescript 前端 pdfjs

以下是针对解决电子签名不显示的pdf预览的方案：

将pdfjs相关源码下载后，拷贝至项目目录下，如src/asssets，

另外需要修改 pdf.worker.js中代码，将以下代码注释：

if (data.fieldType === 'Sig') {
  _this2.setFlags(_util.AnnotationFlag.HIDDEN);
}

不注释的话页面可能看不到电子签名；

然后在angular.json的build配置里添加代码：

"build": {
  "assets": [
    { "glob": "**/*", "input": "src/assets/pdfjs", "output": "/assets/pdfjs" }
  ],
}

‘input’ - 项目中pdfjs所在目录，
‘output’ - 项目build后所要生成的pdfjs所在的目录.

在页面中打开地址：<域名>/pdfjs/web/viewer.html?file=<pdf下载地址>；
或者直接使用ng2-pdfjs-viewer插件；

完成。

💬 pdf.js源码下载

本文链接：https://blog.csdn.net/dingshao1114/article/details/106471159

智能推荐

vue项目通过npm 引入pdf.js 并预览pdf文件

vue项目通过npm 引入pdf.js 并预览pdf文件废话不多说直接上才艺 js方法结束废话不多说直接上才艺首先需要引入vue-pdf 通过或者其次，需要在项目中引用在html中 <pdf :src="pdfSrc" v-for="i in numPages" :key="i" :page="i&quo...

需求：在h5端预览pdf，同时需要判断pdf已经看完，要保存pdf的当前页面，下次打开的时候要回到当前页方式：vue-pdf与pdf.js+iframe pdf.js + iframe 由于我的项目是要在企业微信打开，所以必须要打包到服务器上测试：所以，我的pdf文件需要先放到服务器上面。在官网上下载pdf.js，不同版本可能有不同的坑，如果想深入了解或者想改pdf.js源码来实现自己的需求，...

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

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

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

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

使用pdf.js完美解决跨域显示远程pdf问题

由于公司需要在业务系统展示文服的pdf，最后折腾发现pdf存在严重跨域问题。网上也是各种跨域解决方案，但是没有哪个真正合适或者说能实现的，我参考官方demo和结合网上的一些资源，自己写了一个demo，完美运行，希望对需要的人有一些帮助。 pdf.js官网：http://mozilla.github.io/pdf.js/ 1、页面的body，这里放了一个div，将会动态添加多...

代码先锋网代码片段及技术文章聚合