浅谈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插件写法笔记整理
Sep 06 Javascript
JavaScript版TAB选项卡效果实例
Aug 16 Javascript
JavaScript中数组成员的添加、删除介绍
Dec 30 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
利用fecha进行JS日期处理
Nov 21 Javascript
原生js实现addclass,removeclass,toggleclasss实例
Nov 24 Javascript
p5.js入门教程之图片加载
Mar 20 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
解决Element中el-date-picker组件不回填的情况
Nov 07 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
Symfony核心类概述
2016/03/17 PHP
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
js查错流程归纳
2012/05/04 Javascript
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
自动最大化窗口的Javascript代码
2013/05/22 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
深入探讨前端框架react
2015/12/09 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
JQueryEasyUI之DataGrid数据显示
2016/11/23 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
详解如何在Angular中快速定位DOM元素
2017/05/17 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
Python模拟简单电梯调度算法示例
2018/08/20 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
django使用haystack调用Elasticsearch实现索引搜索
2019/07/24 Python
Python request中文乱码问题解决方案
2020/09/17 Python
Django如何重置migration的几种情景
2021/02/24 Python
css3实现背景模糊的三种方式(小结)
2020/05/15 HTML / CSS
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
澳洲的服装老品牌:SABA
2018/02/06 全球购物
阿迪达斯荷兰官方网站:adidas荷兰
2018/03/16 全球购物
大学专科生推荐信范文
2013/11/23 职场文书
社团活动策划书范文
2014/01/09 职场文书
甜点店创业计划书
2014/01/27 职场文书
党风廉政承诺书
2014/03/27 职场文书
美术专业自荐信
2014/07/07 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
党纪处分决定书
2015/06/24 职场文书
围城读书笔记
2015/06/26 职场文书
大学学生会竞选稿
2015/11/19 职场文书
团队拓展训练心得体会
2016/01/12 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang