浅谈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 相关文章推荐
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
May 20 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
使用ES6语法重构React代码详解
May 09 Javascript
jsonp跨域获取数据的基础教程
Jul 01 Javascript
layui框架与SSM前后台交互的方法
Sep 12 Javascript
taro 实现购物车逻辑的实例代码
Jun 05 Javascript
JS轻量级函数式编程实现XDM二
Jun 16 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
社区(php&amp;&amp;mysql)四
2006/10/09 PHP
php date()日期时间函数详解
2010/05/16 PHP
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
PHP面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
代码生成器 document.write()
2007/04/15 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
Three.js学习之网格
2016/08/10 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
2016/12/22 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
解读ES6中class关键字
2017/11/20 Javascript
利用js实现前后台传送Json的示例代码
2018/03/29 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
使用Python编写简单网络爬虫抓取视频下载资源
2014/11/04 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
django项目搭建与Session使用详解
2018/10/10 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
简单介绍一下pyinstaller打包以及安全性的实现
2020/06/02 Python
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
环保建议书300字
2014/05/14 职场文书
民事赔偿协议书
2014/11/02 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS