H5 页面如何查看 PDF 文件
H5 页面如何查看 PDF 文件

H5 页面如何查看 PDF 文件

我们知道在 Chrome、Firefox 等浏览器可以查看 PDF 文件,不需要额外安装什么插件,这是由于 pdf.js 被预置到了这些浏览器中。

pdf.js 是一款使用 HTML5 Canvas 安全地渲染 PDF 文件以及遵从网页标准的网页浏览器渲染 PDF 文件的JavaScript库。Mozilla基金会主导。

pdf.js 可以作为浏览器或网站的一部分运行。原本是一个Firefox扩展[2],自2012年开始,它被纳入Mozilla Firefox(15版本)[3][4],并从2013年开始默认启用(19版本)成为基本功能[5][6] 。它还是ownCloud的一部分,并可用作Chrome、Chromium[7]、Firefox for Android[8]、Pale Moon[9]及SeaMonkey[10]的附加组件。

以上引用摘自维基百科 PDF.js

在手机浏览器中,如 QQ浏览器、UC 浏览器、Safari 浏览器,打开一个 PDF 是一个下载页面,无法查看。分别使用手机浏览器和桌面浏览器查看 pdf 文件

1032021-20201030142354443-1230809284

1032021-20201030142449415-838401509

手机端浏览器想要查看 PDF 文件可以使用 PDF.js 插件。在线演示地址


一、下载 PDF.js 插件

下载PDF.js插件。如果是下载的压缩包,解压之后,将整个文件夹拷贝到项目中。

1032021-20201030144302105-298285025

二、测试 PDF 文件是否可查看

在服务器中打开 /pdfjs-2.5.207-dist/web/viewer.html 文件。通过 http-server 运行 /web/viewer.html 文件。

http-server -p 10086 以 10086 端口启动服务器。打开手机浏览器访问:http://ip:10086/pdfjs-2.5.207-dist/web/viewer.html (ip改成 127.0.0.1 或本机 ip)。

1032021-20201030153301487-1944553682

三、项目中测试 PDF 是否可查看

在 /pdfjs-2.5.207-dist/web/ 下添加一个 flask入门教程.pdf 和新增 pdf-viewer.html

1032021-20201030161407539-1016317496

注意

在项目中测试时,我们是以 /web/viewer.html 文件为基础,后接 ‘?file=’,再接 pdf 文件地址。注意这里的 pdf 文件和 html 文件的相对路径。

打开手机浏览器访问:http://ip:10086/pdfjs-2.5.207-dist/web/pdf-viewer.html (ip改成 127.0.0.1 或本机 ip)。

1032021-20201030160817600-180032045

四、跨域访问 PDF

通常,我们访问的 PDF 不是一个静态文件,而是接口返回一个 PDF 存放地址,这时,使用  ./viewer.html?file=${pdfUrl} 匹配地址会存在跨域问题。

我们可以使用 webpack 开发服务器中的代理支持来把特定的 URL 转发给后端服务器。以angular工程为例

只要传入 –proxy-config 选项就可以了。 比如,要把所有到 http://localhost:10086/file 的调用都转给运行在 http://192.168.8.184:7600/file 上的服务器,可采取如下步骤。

  1. 在项目的 src/ 目录下创建一个 proxy.conf.json 文件。

  2. 往这个新的代理配置文件中添加如下内容:

  1. 在 CLI 配置文件 angular.json 中为 serve 目标添加 proxyConfig 选项:

  1. 要使用这个代理选项启动开发服务器,请运行 ng serve 命令。

五、其他问题

  1. pdf 访问抛错

当跨域访问时,pdf.js 会抛出错误  file origin does not match viewer's,这时只需要将 viewer.js 中相应提示注释即可:

1032021-20201030170750949-853612177

  1. Angular 防止 XSS 攻击安全问题

当给 <iframe[src]=”someValue”> 中绑定一个 URL,someValue 将会被净化, 以防范攻击者注入 javascript: 之类的 URL,并借此在网站上执行代码。

可使用 bypassSecurityTrustResourceUrl 绕过安全检查,并信任给定的值是一个安全的资源 URL。也就是说该地址可以安全的用于加载可执行代码,比如  &lt;script src&gt; 或  &lt;iframe src&gt;

);

点击数:7

发表回复