乐趣区

关于前端:PDF-文件在线预览pdfjs-使用教程

因我的项目开发须要在线展现 PDF 文件,为解决 PDF 文件 在浏览器关上后电子签章、电子签名等展现不全且局部浏览器兼容问题特利用 pdf.js 解决该问题;
pdf.js 框架为 HTML5, 无需任何本地反对,兼容性极好只有浏览器反对 HTML5 即可 (据说 IE9 以上都是能够的);
过后解决该问题摸索工夫比拟长,其实也并没有设想的那么艰难比较简单特此记录下此博客,以便大家参考!

pdf.js git 地址 : https://github.com/mozilla/pd… pdf.js 官网自行下载包) 有相干根本简介、获取源码及构建

以自行下载包为例
我的项目构建后 会呈现如下两个动态文件夹:

build 目录是 PDF.js 的外围文件,web 目录是 PDF.js 的配置与显示文件

viewer.html 是用来显示 PDF 文件的跳转页面,viewer.js 是其对应配置文件,在 viewer.js 中:

动态替换 PDF 文件门路 此时便可通过拜访 viewer.html 对应门路查看并操作以后 动态 PDF 文件门路

有的小伙伴会说了这基本满足不了以后我的项目需要嘛 谁的 PDF 文件会是动态的 对喽 想到这就阐明大家在思考了那么接下来我就向大家简略介绍下动静生成的 PDF 文件地址该如何赋值~

首先要留神咱们的 PDF 文件有两种办法能够带入进 viewer.html 中展现

  1. 将指定 PDF 文件放在 web 文件夹下 通过指定引入动态文件形式引入
  2. 将 PDF 文件放入服务上以服务地址读取

上面重点讲下 通过接口返回地址拿到地址并展现废话不多说间接上代码:


同时我么们还要将源码中的判断跨域代码正文掉
当所有做完后咱们就能够实现 PDF 文件页面浏览但还会发现签章问题没有失去解决 电子生成签章会不显示 咱们能够通过正文 pdf.worker.js 源码的形式来解决该问题

个别状况下,正文掉了这三行代码,不显示的签名或者电子签章就该显示了。然而 正文了这三行代码,还是报谬误,而且是 util.js 报的
所以第二种办法 咱们在 pdf.worker.js 中找一下报错地位

与控制台报错正告很像吧,求证后就是他接下来就阻断他 Perfect

到这儿明天的内容就差不多了, 心愿能对你们有帮忙!!!

退出移动版