浅谈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 相关文章推荐
JavaScript国旗变换效果代码
Aug 13 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 Javascript
原生js实现跨浏览器获取鼠标按键的值
Apr 08 Javascript
JS定义回车事件(实现代码)
Jul 08 Javascript
Javascript编程之继承实例汇总
Nov 28 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
原生js实现返回顶部缓冲效果
Jan 18 Javascript
使用 Vue.js 仿百度搜索框的实例代码
May 09 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
Feb 21 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 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开发过程中关于继承的使用方法分享
2011/06/17 PHP
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
php实现微信扫码支付
2017/03/26 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
[14:50]2018DOTA2亚洲邀请赛开幕式
2018/04/03 DOTA
[01:32:10]NAVI vs VG Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
python发送arp欺骗攻击代码分析
2014/01/16 Python
Python的组合模式与责任链模式编程示例
2016/02/02 Python
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
numpy.random.seed()的使用实例解析
2018/02/03 Python
python dataframe astype 字段类型转换方法
2018/04/11 Python
利用python画出折线图
2018/07/26 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
预订全球最佳旅行体验:Viator
2018/03/30 全球购物
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
什么是网络协议
2016/04/07 面试题
优秀实习自我鉴定
2013/12/04 职场文书
安全环保演讲稿
2014/08/28 职场文书
2014四风问题对照检查材料范文
2014/09/15 职场文书
代理人委托书
2014/09/16 职场文书
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android
Redis特殊数据类型Geospatial地理空间
2022/06/01 Redis