浅谈PDF.js使用心得


Posted in Javascript onJune 07, 2018

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

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

在线演示地址:http://mozilla.github.com/pdf.js/web/viewer.html

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

解压后的目录结构是:

浅谈PDF.js使用心得

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

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

浅谈PDF.js使用心得

viewer.html是负责显示PDF的,viewer.js是负责配置的文件。viewer.js中:

浅谈PDF.js使用心得

其中var DEFAULT_URL 是默认解析的PDF文件,可以对他进行替换。

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

对于简单只展示一张PDF文件的使用只需要将

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

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

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

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

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

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

通过为window.localStorage.pdf赋值修改PDF的路径(经过测试最好写http协议的路径)

例如:

window.localStorage.pdf= 'http://localhost:8080/pdf/20140620/000000091534588.pdf';
window.location.href=basePath+"jsTool/openPDF/web/viewer.html";

pdf.js的使用方式(四):

摘自(官网的例子)http://mozilla.github.io/pdf.js/examples/

1、页面引入pdf.js。

2、使用PDFJS.getDocument('helloworld.pdf')方式加载要打开的PDF文件。

3、通过PDFJS.getDocument('helloworld.pdf').then(function(pdf){// you can now use *pdf* here});then方式处理后续的方法

4、pdf.getPage(1).then(function(page){// you can now use *page* here});加载PDF的第一页

5、通过h5的canvas进行展示。

var scale = 1.5; 
var viewport = page.getViewport(scale); 
 
var canvas = document.getElementById('the-canvas'); 
var context = canvas.getContext('2d'); 
canvas.height = viewport.height; 
canvas.width = viewport.width; 
 
var renderContext = { 
 canvasContext: context, 
 viewport: viewport 
}; 
page.render(renderContext);

完整例子:

//引入pdf.js之后 
var url = '//cdn.mozilla.net/pdfjs/helloworld.pdf'; 
//加载核心文件 
PDFJS.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js'; 
 
var loadingTask = PDFJS.getDocument(url); 
loadingTask.promise.then(function(pdf) { 
 console.log('PDF loaded'); 
  
 var pageNumber = 1; 
 pdf.getPage(pageNumber).then(function(page) { 
  console.log('Page loaded'); 
   
  var scale = 1.5; 
  var viewport = page.getViewport(scale); 
 
  var canvas = document.getElementById('the-canvas'); 
  var context = canvas.getContext('2d'); 
  canvas.height = viewport.height; 
  canvas.width = viewport.width; 
 
  var renderContext = { 
   canvasContext: context, 
   viewport: viewport 
  }; 
  var renderTask = page.render(renderContext); 
  renderTask.then(function () { 
   console.log('Page rendered'); 
  }); 
 }); 
}, function (reason) { 
 console.error(reason); 
});

通过点击进行一页一页的查看:

页面:

<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script> 
 
<h1>PDF.js Previous/Next example</h1> 
 
<div> 
 <button id="prev">Previous</button> 
 <button id="next">Next</button> 
    
 <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span> 
</div> 
 
<canvas id="the-canvas"></canvas>

js:

var url = '//cdn.mozilla.net/pdfjs/tracemonkey.pdf'; 
 
PDFJS.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js'; 
 
var pdfDoc = null, 
  pageNum = 1, 
  pageRendering = false, 
  pageNumPending = null, 
  scale = 0.8, 
  canvas = document.getElementById('the-canvas'), 
  ctx = canvas.getContext('2d'); 
 
function renderPage(num) { 
 pageRendering = true; 
 pdfDoc.getPage(num).then(function(page) { 
  var viewport = page.getViewport(scale); 
  canvas.height = viewport.height; 
  canvas.width = viewport.width; 
 
  var renderContext = { 
   canvasContext: ctx, 
   viewport: viewport 
  }; 
  var renderTask = page.render(renderContext); 
 
  renderTask.promise.then(function() { 
   pageRendering = false; 
   if (pageNumPending !== null) { 
    // New page rendering is pending 
    renderPage(pageNumPending); 
    pageNumPending = null; 
   } 
  }); 
 }); 
 
 document.getElementById('page_num').textContent = pageNum; 
} 
 
function queueRenderPage(num) { 
 if (pageRendering) { 
  pageNumPending = num; 
 } else { 
  renderPage(num); 
 } 
} 
 
function onPrevPage() { 
 if (pageNum <= 1) { 
  return; 
 } 
 pageNum--; 
 queueRenderPage(pageNum); 
} 
document.getElementById('prev').addEventListener('click', onPrevPage); 
 
function onNextPage() { 
 if (pageNum >= pdfDoc.numPages) { 
  return; 
 } 
 pageNum++; 
 queueRenderPage(pageNum); 
} 
document.getElementById('next').addEventListener('click', onNextPage); 
 
PDFJS.getDocument(url).then(function(pdfDoc_) { 
 pdfDoc = pdfDoc_; 
 document.getElementById('page_count').textContent = pdfDoc.numPages; 
 
 renderPage(pageNum); 
});

对于该插件的功能很强大,有很多下载(下载手机端不可用)或者是跳转页面的功能,如果不想让客户查看的话可以去viewer.html中将相应的按钮隐藏或者删除即可

补充一点:viewer在解析和渲染pdf的时候有点耗费系统资源,尤其是cpu资源,不知道是不是因为我的本子配置较低的缘故,在页面加载等待的过程中,IE进程消耗掉了CPU资源的50-60%。点击翻页操作,或者改变IE的窗口大小会触发viewer对pdf进行重新解析和渲染。有时把IE前端的某个挡住他的程序窗口(比如一个txt)移开也会导致重新渲染,但是并不是每次都会触发,原因不详。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 Javascript
Javascript加载速度慢的解决方案
Mar 11 Javascript
Javascript中的几种URL编码方法比较
Jan 23 Javascript
jQuery对指定元素中指定字符串进行替换的方法
Mar 17 Javascript
jquery+CSS3实现3D拖拽相册效果
Jul 18 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
Angular.JS读取数据库数据调用完整实例
Jul 02 Javascript
使用layui定义一个模块并使用的例子
Sep 14 Javascript
Angular8 实现table表格表头固定效果
Jan 03 Javascript
js实现3D旋转相册
Aug 02 Javascript
JavaScript 对象创建的3种方法
Nov 17 Javascript
vue better scroll 无法滚动的解决方法
Jun 07 #Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 #Javascript
JavaScript 正则命名分组【推荐】
Jun 07 #Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 #Javascript
vue.js实现标签页切换效果
Jun 07 #Javascript
js数组去重的N种方法(小结)
Jun 07 #Javascript
vue+axios新手实践实现登陆的示例代码
Jun 06 #Javascript
You might like
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
mysq GBKl乱码
2006/11/28 PHP
php生成文件
2007/01/15 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
简单介绍win7下搭建apache+php+mysql开发环境
2015/08/06 PHP
微信支付开发发货通知实例
2016/07/12 PHP
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
使用jQuery重置(reset)表单的方法
2014/05/05 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
Python加密方法小结【md5,base64,sha1】
2017/07/13 Python
python添加模块搜索路径方法
2017/09/11 Python
Python中的TCP socket写法示例
2018/05/11 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
英格兰足协官方商店:England Store
2019/07/12 全球购物
党员思想汇报范文
2013/12/30 职场文书
阳光体育活动方案
2014/02/16 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
购房协议书范本
2014/04/11 职场文书
公司节能减排方案
2014/05/16 职场文书
党员个人整改措施
2014/10/24 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书