PDF 文件在线预览(pdf.js 使用教程)

因项目开发需要在线展示 PDF文件,为解决 PDF文件 在浏览器打开后电子签章、电子签名等展示不全且部分浏览器兼容问题特利用pdf.js解决该问题;
pdf.js框架为HTML5,无需任何本地支持,兼容性极好只要浏览器支持 HTML5 即可(据说 IE9 以上都是可以的);
当时解决该问题探索时间比较长,其实也并没有想象的那么困难比较简单特此记录下此博客,以便大家参考!

pdf.js git地址 : https://github.com/mozilla/pd...
(也可上 pdf.js官网自行下载包) 有相关基本简介、获取源码及构建

以自行下载包为例
项目构建后 会出现如下两个静态文件夹:
image.png
静态替换PDF文件路径 此时便可通过访问viewer.html对应路径查看并操作当前 静态PDF文件路径

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

首先要注意我们的PDF文件有两种方法可以带入进viewer.html中展示

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

下面重点讲下 通过接口返回地址拿到地址并展示废话不多说直接上代码:
PDF 文件在线预览(pdf.js 使用教程)_第1张图片
到这儿今天的内容就差不多了,希望能对你们有帮助!!!

你可能感兴趣的:(前端,pdf)