pdf.js使用总结#如何在网页读取并显示PDF格式文档
pdf.js可以实现在html下直接浏览pdf文档，是一款开源的pdf文档读取解析插件
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。
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>
效果图如下所示：
更多精彩
