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 文件

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

H5 页面如何查看 PDF 文件插图1

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


一、下载 PDF.js 插件

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

H5 页面如何查看 PDF 文件插图2

二、测试 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)。

H5 页面如何查看 PDF 文件插图3

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

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

H5 页面如何查看 PDF 文件插图4

注意

在项目中测试时,我们是以 /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)。

H5 页面如何查看 PDF 文件插图5

四、跨域访问 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 中相应提示注释即可:

H5 页面如何查看 PDF 文件插图6

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

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

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

);

浏览量: 22

发表回复