使用 pdf.js 在网页中加载 pdf 文件

摘要：

在网页中加载并显示PDF文件是最常见的业务需求。打开viewer.js，可以看到默认文件指向了“compressed.tracemonkey-pldi-09.pdf”二、将pdf.js集成到项目网页中将解压缩的内容复制到项目中有多种方式加载加载并查看pdf文件内容。

在网页中加载并显示PDF文件是最常见的业务需求。例如以下应用场景：（1）在电商网站上购物之后，下载电子发票之前先预览发票。（2）电子政务管理系统中查看发布的公文，公文文件一般是PDF格式的文件。

使用 pdf.js 在网页中加载 pdf 文件第1张

目前随着浏览器技术发展的不断成熟与强大，大部分的浏览器都支持直接把PDF文件拖到浏览器中显示，最方便的是这个操作不需要额外的插件支持。但是不同的浏览器加载显示PDF的效果不同。这时就需要专门的JS插件来处理。Mozilla开源了一个插件pdf.js，无需任何本地支持就可以在所有主流的浏览器上显示PDF文档，使用起来十分的方便。唯一的要求就是浏览器必须支持HTML5。

使用 pdf.js 在网页中加载 pdf 文件第2张

一、pdf.js 简介

官网地址：http://mozilla.github.io/pdf.js/，下载稳定版本，目前最新稳定版为v2.2.228

1、下载至本地：使用 pdf.js 在网页中加载 pdf 文件第4张

2、解压缩，里面包含2个目录

使用 pdf.js 在网页中加载 pdf 文件第5张

build目录包含以下内容，其中pdf.js是核心文件

使用 pdf.js 在网页中加载 pdf 文件第6张

web目录包含以下内容，其中viewer.html是pdf查看器

使用 pdf.js 在网页中加载 pdf 文件第7张

3、在VS中打开viewer.html，引用了查看其的样式文件viewer.css、pdf.js核心文件、查看器脚本文件viewer.js 、资源文件local.properties。

使用 pdf.js 在网页中加载 pdf 文件第8张

4、直接在浏览器中打开viewer.html，能正常的显示pdf查看器，但是无法显示pdf文件。

使用 pdf.js 在网页中加载 pdf 文件第9张

必须将 pdfjs-2.2.228-dist 包，部署在IIS上之后，通过http方式访问才能正常的加载显示pdf格式文件的内容

5、在IIS中部署之后，通过http://localhost:8033/pdfjs/web/viewer.html方式访问该查看器。该查看器中默认加载的是 pdf.js 的使用说明书内容。

使用 pdf.js 在网页中加载 pdf 文件第10张

打开viewer.js，可以看到默认文件指向了“compressed.tracemonkey-pldi-09.pdf”

使用 pdf.js 在网页中加载 pdf 文件第11张

二、将 pdf.js 集成到项目网页中

将解压缩的内容复制到项目中

有多种方式加载加载并查看pdf文件内容。

方式1：通过链接方式，在viewer.html页面中独立独立查看【通过文件路径】

使用 pdf.js 在网页中加载 pdf 文件第13张

实现方法：通过<a/> 标签链接到viewer.html页面，需要传递一个重要的参数【file】，设置为要显示的pdf文件的路径

<a href="Content/pdfjs-2.2.228/web/viewer.html?file=http://localhost:8033/PDFTest/Pdf/项目的5个管理过程组和项目管理知识领域映射关系.pdf">
点击查看pdf内容</a>

点击a链接，打开独立的窗口

使用 pdf.js 在网页中加载 pdf 文件第14张

方式2：嵌入在网页中【通过文件路径】

某些场景下需要将PDF查看器集成在业务网页中，便于业务流程的操作

使用 pdf.js 在网页中加载 pdf 文件第15张

实现方法：通过iframe实现。任然需要传递file参数，设置pdf文件的路径

<div id="divPdfViewPanel2"style="margin: 5px;">
         <iframe src="Content/pdfjs-2.2.228/web/viewer.html?file=http://localhost:8033/PDFTest/Pdf/项目的5个管理过程组和项目管理知识领域映射关系.pdf"width="100%"height="400px;"></iframe>
</div>