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格式文档的更多相关文章

  1. 从多个XML文档中读取数据用于显示webapi帮助文档

    前言: 你先得知道HelpPageConfig文件,不知道说明你现在不需要这个,所以下文就不用看了,等知道了再看也不急.当然如果你很知道这个,下文也不用看了,因为你会了. 方法一: new XmlDo ...

  2. Node.js的下载、安装、配置、Hello World、文档阅读

    Node.js的下载.安装.配置.Hello World.文档阅读

  3. CEBX格式的文档如何转换为PDF格式文档、DOCX文档?

    方正阿帕比CEBX格式的文档如何转换为PDF格式文档.DOCX文档? 简介: PDF.Doc.Docx格式的文档使用的非常普遍,金山WPS可以直接打开PDF和Doc.Docx文档,使用也很方便. CE ...

  4. 【ABAP系列】SAP 读取生产订单 记入文档的货物移动明细

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP 读取生产订单 记入文档的 ...

  5. 从隔壁兄弟那爬点网页数据,整理成word文档

    package com.parse_report; import com.report.utils.ParseUrl; /** * Create by JIUN 2018/7/14 */ public ...

  6. 如何用代码读取Office Online Server2016的文档的备注信息

    前言 在一个项目上客户要求读取office online server 2016的对文档的备注信息,如下图: 以前思路老纠结在OOS这个在线上,总有以为这个信息存储在某个列表中,其实错了,这个备注信息 ...

  7. PDF 补丁丁 0.4.2.1218 测试版发布:新增拆分文档功能

    新的测试版的“提取页面”功能增加了拆分文档的选项. 可按照指定的页码范围(用“:”分号分割).顶层书签或指定页数三种方式,将一个 PDF 文档拆分成多个文档. 此功能还支持多个文档批量操作. 欢迎各位 ...

  8. 用Word收集网页中的内容,用文档结构图整理

    如何用Word保存网页中的内容 网页中的内容,用什么保存好? 用笔记类软件是个不错的选择,还可以用 Word 保存,这样方便用“文档结构图”来整理网页. 如图:网页收集后用文档结构图进行整理. (图一 ...

  9. js 和 jquery 获取页面和滚动条的高度 视口高度文档高度

    js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight & ...

随机推荐

  1. Nginx 安装及配置、负载均衡https网站及转发后页面js、css等路径找不到问题、更换证书导致问题解决

    官网下载nginx:http://nginx.org/en/download.html 安装nginx编译环境:yum install -y gcc-c++ 安装pcre库解析正则:yum insta ...

  2. Linux系统安装笔记

    1.下载CentOS系统镜像: 很多资料都是CentOS6的,7的比较少,所以我决定还是用CentOS6来学习. 地址:http://vault.centos.org/6.8/isos/x86_64/ ...

  3. SSH应用实战——安全防护(fail2ban)

    ssh 安全配置 端口 ssh随机端口范围在 27000-30000,可以手动修改也要改在这个范围内,建议定时修改端口. 密码 登陆密码应包含大小写.数字.特殊字符等 10 位以上,建议定期修改密码. ...

  4. Visual Studio color schemes

    Vs环境主题配置 下载地址:https://studiostyl.es/ Son of Obsidian 下载:son-of-obsidian_vs2015.zip Litle monokai vst ...

  5. 第 9 章 数据管理 - 077 - 跨主机使用 Rex-Ray volume

    跨主机使用 Rex-Ray volume 在docker1上创建mysql容器,并挂载使用mysqldata数据卷 磁盘文件直接挂载在了docker1 上 验证数据 也是存在的 Rex-Ray 可以提 ...

  6. js判断输入的input内容是否为数字

    有时候我们输入的input的内容需要判断一下是否是数字,所以为了更好的客户体验,在前端先处理一下: <input type="text" name="val&quo ...

  7. 现代 PHP 新特性 —— 内置的 HTTP 服务器 (转)

    转自 https://laravelacademy.org/post/4422.html 从 PHP 5.4.0 起,PHP内置了Web服务器,这对于认为需要Apache或Nginx才能预览PHP应用 ...

  8. Goroutine通信与thread in java间的通信

    // This file contains the implementation of Go channels. // Invariants: //  At least one of c.sendq ...

  9. RSA加密、解密、签名、验签的原理及方法

    一.RSA加密简介 RSA加密是一种非对称加密.可以在不直接传递密钥的情况下,完成解密.这能够确保信息的安全性,避免了直接传递密钥所造成的被破解的风险.是由一对密钥来进行加解密的过程,分别称为公钥和私 ...

  10. CSAPP之阅读笔记-计算机系统漫游(1)

    最近在看CSAPP(深入理解计算机系统第二版),其实最新版是第三版.但是,我看了一下价格100多大洋,于是去老夫子旧书网上买了本第二版的,花了30多块钱.哈哈. 网上看了一些关于此书的书评,都说是本好 ...