HTML显示PDF文件内容——pdf.js

前言目前显示pdf内容的解决方案其实不少，个人这边接触到的前端常用的可以使用FireFox火狐的PDF.js库，后端可以使用Itext框架等本文主要介绍PDF.js库的实现方案，至于有朋友对Itext（这里做一个简单说明，目前最新的是itext7，同时itext5和7是不兼容的哦）的实现方案感兴趣的欢迎留言私信，后续也会推出相应的的说明文章。

一、显示pdf内容的几种方式这里简单说以下几种方式，分为官方在线以及自己本地搭建两种方式：官方在线预览官方在线预览使用这个地址即可实现文件查看，同时官方提供了一套简单的ui供操作http://mozilla.github.io/pdf.j

s/web/viewer.html?file=xxx/xxx/xxx.pdf本地或者服务端自行搭建这种方式其实依然可以利用源码中的viewer.html如上述方式实现预览查看，同时也可以通过代码读取文件内容渲染查看（关于源码编译的方式后文有相应介绍）

二、获取pdf.js库文件获取方式有两种~第一种：直接使用官方编译好的文件进行使用，注意es5和es6两种版本，根据自己的实际情况选择性使用~第二种：使用官方源码进行编译产生库文件使用2.1 直接下载官方库文件。

官方下载地址：Getting Started

官方截图2.2 源码编译由于官方源码在github上开源，因此下载编译最好使用git进行，官方也推荐使用git，关于git如何安装使用可自行百度，如果不清楚也可以直接下载压缩包文件使用下载方式：git clone https://github.com/mozilla/pdf.js.git。

编译：// 进入源码文件夹 cd pdf.js // 安装gulp脚手架 npm install -g gulp-cli // 安装项目依赖 npm install // 编译es6版本 gulp generic // 编译es5版本 gulp generic-es5

注意： 以上需要使用到npm命令，需要自行安装node和npm支持源码下载路径如果是window用户，建议不要在c盘进行使用命令时最好使用管理员身份进行操作，以免权限干扰导致无法编译成功

编译pdf.js库使用上述方式编译成功后会在build文件夹中出现generic文件夹，里面正是如官方下载后的库文件，使用方式相同。

编译后产生的文件三、使用PDF.js显示pdf文件内容（这里显示方式不包括上文提到的官方在线连接显示方式）3.1 使用viewer.html显示使用类似路径即可查看xxxx/web/viewer.html

?file=xxx/xxx/xxx.pdf3.2 使用代码方式自行读取显示在代码中引入pdf.js库

>使用一个canvas接收需要读取到的pdf内容进行显示创建读取对象varloadingTask=pdfjsLib.getDocument

(data)以上代码中data可以是pdf文件对应的Base64字符串，也可以是文件所在相对或者绝对路径，也可以是一个在线文件url地址loadingTask.promise.then(function。

(pdf){for(vari=1;i<=pdf.numPages;i++){pdf.getPage(1).then(function(page){varscale=2varviewport=page.getViewport

({scale:scale})varcanvas=document.getElementById(myCanvas)varcontext=canvas.getContext(2d)canvas.height

=viewport.heightcanvas.width=viewport.widthvarrenderContext={canvasContext:context,viewport:viewport,

};page.render(renderContext);})}});四、总结在读取显示PDF文件的应用中，可以根据实际情况作出调整，比如文件显示的方法缩小、文件显示后再上面累加一些控件，并实现相应交互效果等等，授人以鱼+渔，这里提供一个我之前写的demo供大家参考，

No.N/pdfViewer