浅谈PDF.js使用心得

一次在开发微信预览保单的时候所使用到的，由于安卓手机浏览器不支持解析PDF，所以才用了PDF.js来解析便携文档格式并展示。

pdf.js是一个技术原型主要用于在HTML5平台上展示便携文档格式文档，无需任何本地技术支持。

在线演示地址：http://Mozilla。github。com/pdf。js/web/查看器。超文本标记语言

PDF.js可在官网下载地址：http://mozilla.github.io/pdf.js/

解压后的目录结构是：

其中建设目录是PDF.js的核心文件。

网目录是PDF.js的配置与显示文件。

viewer.html是负责显示便携文档格式的viewer.js是负责配置的文件viewer.js中：

其中var DEFAULT_URL是默认解析的便携文档格式文件，可以对他进行替换。

pdf.js的使用方式（一):

对于简单只展示一张便携文档格式文件的使用只需要将

默认路径配置好即可，但是很多情况这种方式不满足开发需求。

pdf.js的使用方式（二):

在地址栏后面传？文件=test.pdf即可完成对默认路径的修改

http://localhost :8080/pdf js/web/viewer。html？file=test.pdf//这种最好不要传输中文具体我没用试过

这里的test.pdf取与viewer.html的相对路径即可（整个服务器的绝对路径也行)

pdf.js的使用方式（三):

通过为window.localStorage.pdf赋值修改便携文档格式的路径（经过测试最好写超文本传送协议(超文本传输协议的缩写)协议的路径)

例如：

窗户。本地存储。pdf=' http://localhost :8080/pdf/20140620/0000091534588。' pdf '；窗户。位置。href=BasePath ' JSTool/OpenPdF/web/viewer。html '；pdf.js的使用方式（四):

摘自（官网的例子)http://Mozilla。github。io/pdf。js/示例/

1、页面引入pdf.js。

2、使用pdf js。GetDocument(' hello world。pdf’)方式加载要打开的便携文档格式文件。

3、通过pdf js。GetDocument(' hello world。pdf ').然后（函数(pdf){//现在可以在这里使用*pdf*了});然后方式处理后续的方法

4、pdf.getPage(1)。然后（函数(第页){//现在可以在这里使用*第*页了});加载便携文档格式的第一页

5、通过h5的帆布进行展示。

定义变量标度=1.5;var viewport=page.getViewport(比例);var canvas=文档。getelementbyid('-canvas ')；var上下文=canvas。get context(' 2d ')；帆布。高度=视口。身高；帆布。宽度=视口。宽度；var render context={ canvascontext : context，viewport : viewport }；佩奇。渲染(RenderContext)；完整例子：

//引入pdf.js之后var URL='//cdn。Mozilla。net/pdf js/hello world。' pdf '；//加载核心文件pdfjs。Workersrc='//Mozilla。github。io/pdf。js/build/pdf。工人。js '；var加载任务=PDFJS。GetDocument(网址)；正在加载任务。答应我。然后(函数(PDF){控制台。日志('已加载PDFvar页码=1；pdf.getPage(页码)。然后（函数（页面){ console.log('页面已加载');定义变量标度=1.5;var viewport=page.getViewport(比例);var canvas=文档。getelementbyid('-canvas ')；var上下文=canvas。get context(' 2d ')；帆布。高度=视口。身高；帆布。宽度=视口。宽度；var render context={ canvascontext : context，viewport : viewport }；var RenderTask=page。渲染(RenderContext)；rendertask。然后(function(){ console。日志('页面渲染')；});});},函数（原因){ console.error(原因);});通过点击进行一页一页的查看：

页面：

脚本src=' http://Mozilla。github。io/pdf。js/build/pdf。js /脚本h1PDF.js上一个/下一个示例/h1 div按钮id='prev '上一个/按钮id='next '下一个/按钮span page : span id=' page _ num '/span/span id=' page _ count '/span/span/div画布id='the-canvas'/canvas js:

var URL='//cdn。Mozilla。net/pdf js/trace monkey。' pdf '；pdfjs。Workersrc='//Mozilla。github。io/pdf。js/build/pdf。工人。js '；var pdfDoc=null，pageNum=1，pageRendering=false，pageNumPending=null，scale=0.8，canvas=document。getelementbyid(' the-canvas ')，CTX=canvas。get context(' 2d ')；函数render page(num){ page render ring=true；pdfDoc.getPage(num).然后(函数(页面){ var viewport=page。getviewport(比例)；帆布。高度=视口。身高；帆布。宽度=视口。宽度；var renderContext={ canvascontext : CTX，视口：视口}；var RenderTask=page。渲染(RenderContext)；渲染任务。答应我。然后(function(){ page rendered ring=false；if(页码numimpending！==null) { //新页面呈现挂起呈现页面(page num pending)；page Numpending=null } })；});文件。getelementbyid(' page _ num ').textContent=pageNum}函数queueRenderPage(num){ if(page renderpage){ page numpending=num；} else { RenderPage(num)；} }函数onrevpage(){ if(page num=1){ return；} PageNum-；queueRenderPage(页码)；} document.getElementById('prev ').addEventListener('click '，on rev page)；函数onNextPage(){ if(page num=Pdfdoc。NumPages){ return；} pageNumqueueRenderPage(页码)；} document.getElementById('next ').addEventListener('click '，onNextPage)；PDFJS.getDocument(url).然后（函数(PdfDoc _){ PdfDoc=PdfDoc _；文件。getelementbyid(' page _ count ').text content=PdFDoc . NumPagesRender页面(页码)；});对于该插件的功能很强大，有很多下载（下载手机端不可用)或者是跳转页面的功能，如果不想让客户查看的话可以去viewer.html中将相应的按钮隐藏或者删除即可

补充一点：查看器在解析和渲染可移植文档格式文件的扩展名(可移植文档格式的缩写)的时候有点耗费系统资源，尤其是中央处理器资源，不知道是不是因为我的本子配置较低的缘故，在页面加载等待的过程中，IE进程消耗掉了中央处理器资源的50-60%。点击翻页操作，或者改变工业管理学(工业工程)的窗口大小会触发电视观众对可移植文档格式文件的扩展名(可移植文档格式的缩写)进行重新解析和渲染。有时把工业管理学(工业工程)前端的某个挡住他的程序窗口（比如一个txt)移开也会导致重新渲染，但是并不是每次都会触发，原因不详。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。