浅谈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 call和apply方法
Nov 24 Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 Javascript
Jquery Autocomplete 结合asp.net使用要点
Oct 29 Javascript
javascript一些实用技巧小结
Mar 18 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
Apr 15 Javascript
JavaScript获取flash对象与网上的有所不同
Apr 21 Javascript
Backbone View 之间通信的三种方式
Aug 09 Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 Javascript
React Navigation 使用中遇到的问题小结
May 08 Javascript
Vue动态组件与异步组件实例详解
Feb 23 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
Vue通过懒加载提升页面响应速度
May 10 Vue.js
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
Codeigniter的dom类用法实例
2015/06/26 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
jQuery插件实现可输入和自动匹配的下拉框
2016/10/24 Javascript
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
2019/09/27 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
django js实现部分页面刷新的示例代码
2018/05/28 Python
详解python statistics模块及函数用法
2019/10/27 Python
Python: 传递列表副本方式
2019/12/19 Python
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
毕业生自荐书
2014/02/03 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
欢迎标语大全
2014/06/21 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
Mysql忘记密码解决方法
2022/02/12 MySQL
vue3不同环境下实现配置代理
2022/05/25 Vue.js
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技