pdf.js使用总结#如何在网页读取并显示PDF格式文档
pdf.js可以实现在html下直接浏览pdf文档,是一款开源的pdf文档读取解析插件
pdf.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,一个负责API解析,一个负责核心解析。
我发现pdf.js就是把pdf以图片形式展示在页面上的。
所以在使用之前需要导入这两个jar包,具体使用最好查看Github上的开源项目(https://github.com/mozilla/pdf.js),上面的文档也很详细,在examples文件夹下有示例可以参照。
在我们的项目中,经过测试发现可能由于生成PDF文件工具的不同,所以PDF文档的宽度也可能会有所不同,所以在项目中需要能自适应文件文档宽度,按比例缩放显示。
实现代码如下:
<script type="text/javascript">
var pdfName="<%=parturl%>";
var curWwwPath = window.document.location.href;
var pathName = window.document.location.pathname;
var pos = curWwwPath.indexOf(pathName);
//获取主机地址,如: http://localhost:8083
var localhostPath = curWwwPath.substring(0, pos);
//获取带"/"的项目名,如:/uimcardprj
var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
/* var url=localhostPath + projectName+'/WEB-INF/adminUpload/pdfFile/'+pdfName; */
var url=localhostPath + projectName+'/fileUpload/adminFile/'+pdfName;
var pdfDoc = null,
pageNum = 1,
pageRendering = false,
pageNumPending = null,
scale = 1.5;//定义缩放比
/**
* Get page info from document, resize canvas accordingly, and render page.
* @param num Page number.
*/
function renderPage(num) {
pageRendering = true;
// Using promise to fetch the page
pdfDoc.getPage(num).then(function(page) {
var canvasList = document.getElementById('canvas_list');
var canvas = document.createElement('canvas');
canvasList.appendChild(canvas);
var ctx = canvas.getContext('2d');
var viewport = page.getViewport(scale);
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
var renderTask = page.render(renderContext);
// Wait for rendering to finish
renderTask.promise.then(function() {
pageRendering = false;
if (pageNumPending !== null) {
// New page rendering is pending
renderPage(pageNumPending);
pageNumPending = null;
}
});
});
}
/**
* If another page rendering in progress, waits until the rendering is
* finised. Otherwise, executes rendering immediately.
*/
function queueRenderPage(num) {
if (pageRendering) {
pageNumPending = num;
} else {
renderPage(num);
}
}
/**
* Asynchronously downloads PDF.
*/
PDFJS.getDocument(url).then(function(pdfDoc_) {
pdfDoc = pdfDoc_;
pdfDoc.getPage(1).then(function(page) {
var viewport = page.getViewport(scale);
//根据PDF宽度大小设置自适应缩放比
var temp = 3674.7-viewport.width;
if(temp>0){
scale=Math.abs(3674.7-viewport.width)/1854.5;
}else{
scale=Math.abs(6587-viewport.width)/7894.7;
}
//alert(scale+","+viewport.width);
});
for(var i = 1 ; i <= pdfDoc.numPages; i++) {
queueRenderPage(i);
}
});
</script>
代码中的scale 变量是定义缩放比,默认是1.5倍显示,定义viewport :
viewport = page.getViewport(scale);
此时viewport.width用来判断在1.5倍缩放后PDF的宽度(以px为单位),大部分在这个比例下宽度大约为900px,显示正常,但是也有特别大的,测试过程中发现最大(宽)的一个PDF在1.5倍缩放下宽度约为3900px,此时在页面上只能显示部分,于是调缩放比为0.32的时候显示正常,大约为900px,根据这个关系,我列了一个二元一次方程组,试图根据pdf在1.5倍缩放下的宽度(px),求出一个合理的缩放比(scale),使PDF的宽度都以900px显示。因为测量的不准确,求出的参数差距很大,在最后不得已采用两组参数混合使用,才起到了对PDF很好的兼容。
由于所有的PDF文档是上传到服务器上而不是本地,所以上面的代码中有一部分是为了获取到PDF文件的地址。可以对比官方示例进行学习。
官方helloworld.html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>'Hello, world!' example</title>
</head>
<body> <h1>'Hello, world!' example</h1> <canvas id="the-canvas" style="border:1px solid black"></canvas> <script src="pdf.js"></script> <script id="script">
//
// If absolute URL from the remote server is provided, configure the CORS
// header on that server.
//
var url = './helloworld.pdf'; //
// The workerSrc property shall be specified.
//
pdfjsLib.GlobalWorkerOptions.workerSrc =
'pdf.worker.js'; //
// Asynchronous download PDF
//
var loadingTask = pdfjsLib.getDocument(url);
loadingTask.promise.then(function(pdf) {
//
// Fetch the first page
//
pdf.getPage(1).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport({ scale: scale, }); //
// Prepare canvas using PDF page dimensions
//
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width; //
// Render PDF page into canvas context
//
var renderContext = {
canvasContext: context,
viewport: viewport,
};
page.render(renderContext);
});
});
</script> <hr>
<h2>JavaScript code:</h2>
<pre id="code"></pre>
<script>
document.getElementById('code').textContent =
document.getElementById('script').text;
</script>
</body>
</html>
效果图如下所示:
pdf.js使用总结#如何在网页读取并显示PDF格式文档的更多相关文章
- 从多个XML文档中读取数据用于显示webapi帮助文档
前言: 你先得知道HelpPageConfig文件,不知道说明你现在不需要这个,所以下文就不用看了,等知道了再看也不急.当然如果你很知道这个,下文也不用看了,因为你会了. 方法一: new XmlDo ...
- Node.js的下载、安装、配置、Hello World、文档阅读
Node.js的下载.安装.配置.Hello World.文档阅读
- CEBX格式的文档如何转换为PDF格式文档、DOCX文档?
方正阿帕比CEBX格式的文档如何转换为PDF格式文档.DOCX文档? 简介: PDF.Doc.Docx格式的文档使用的非常普遍,金山WPS可以直接打开PDF和Doc.Docx文档,使用也很方便. CE ...
- 【ABAP系列】SAP 读取生产订单 记入文档的货物移动明细
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP 读取生产订单 记入文档的 ...
- 从隔壁兄弟那爬点网页数据,整理成word文档
package com.parse_report; import com.report.utils.ParseUrl; /** * Create by JIUN 2018/7/14 */ public ...
- 如何用代码读取Office Online Server2016的文档的备注信息
前言 在一个项目上客户要求读取office online server 2016的对文档的备注信息,如下图: 以前思路老纠结在OOS这个在线上,总有以为这个信息存储在某个列表中,其实错了,这个备注信息 ...
- PDF 补丁丁 0.4.2.1218 测试版发布:新增拆分文档功能
新的测试版的“提取页面”功能增加了拆分文档的选项. 可按照指定的页码范围(用“:”分号分割).顶层书签或指定页数三种方式,将一个 PDF 文档拆分成多个文档. 此功能还支持多个文档批量操作. 欢迎各位 ...
- 用Word收集网页中的内容,用文档结构图整理
如何用Word保存网页中的内容 网页中的内容,用什么保存好? 用笔记类软件是个不错的选择,还可以用 Word 保存,这样方便用“文档结构图”来整理网页. 如图:网页收集后用文档结构图进行整理. (图一 ...
- js 和 jquery 获取页面和滚动条的高度 视口高度文档高度
js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight & ...
随机推荐
- [原]osg模型动画|骨骼动画
参考源码:osg的官方例子:osganimationviewer 首先制作一个带骨骼动画的模型 demo.FBX 这里面我们做了两个骨骼动画:1.open 2.close 下面开始在osg中使用 ...
- grep 从文件内容中查找
grep -rin [查找目标] [查找范围] 例子:在当前目录下的文件内查找test字符串 grep -rin test ./
- D - Dice Game (BFS)
A dice is a small cube, with each side having a different number of spots on it, ranging from 1 to 6 ...
- sublime和vscode 格式化Json ——两步走
目录 1.问题来源 2.sublime安装插件方式 3.使用方式 4.扩展:对于软件vscode 1.问题来源 最近做数据匹配任务,需要生成很多json文件,但是每个json文件又太大,想要逐字段(k ...
- MySQLdb使用
介绍: mysqldb是python操作mysql数据库的一个库.mysql的几乎所有的操作都可以实现. 基本使用: import MySQLdb conn = MySQLdb.connect(h ...
- 小程序getLocation出现的各种问题汇总
1.小程序无法弹出授权位置的弹框: 需要在app.json中增加相关配置文件: "permission": { "scope.userLocation": { ...
- 新手vue构建单页面应用实例
本人写的小程序,功能还在完善中,欢迎扫一扫提出宝贵意见! 步骤: 1.使用vue-cli创建项目2.使用vue-router实现单页路由3.用vuex管理我们的数据流4.使用vue-resource请 ...
- php国家或者编码英文字母排序
1.直接复制传入需要排序的字符,然后可以把返回的数据当key,传送给前台function getFirstCharter($str){ if(empty($str)){return '';} $fch ...
- ASP.NET Razor - 标记
目录 什么是 Razor? Razor 帮助器 ASP.NET Razor - C# 和 VB 代码语法 主要的 Razor C# 语法规则 它是如何工作的? 使用对象 If 和 Else条件 读取用 ...
- AngelToken——富有价值的区块链服务平台
关于我们 Angel Token,简称ANG,是基于ETH代币的去中心化数字交易平台. 行业现状 截至2017年12月,全球数字货币总市值已经触及6000亿美元.而2016年12月31日,这个数字才仅 ...