PDF阅读器
PUBLISHED
概述
本文演示在Web页面上显示PDF文件。 所有的数据和代码都从开源库pdf.js中取得。
PDF阅读器应用程序
现今大多数书籍都有软件副本。 智能手机PDF阅读器允许用户读书或基于PDF的文档,不需使用标准的应用程序如Acrobat Reader..等等。 本文中使用基于mozilla的PDF.js库。 在Tizen框架中只需修改很少的代码就可以工作。 具体细节请下载附带的源代码。
先决条件
下面的开源javascript库必须包含在html页面
<script src="lib/pdf.js"></script> <script src="lib/fonts.js"></script> <script src="lib/cffStandardStrings.js"></script> <script src="lib/Encodings.js"></script> <script src="lib/glyphlist.js"></script>
HTML页面
web页面内容为界面区域包含一个div元素,用于为页面引用渲染PDF文件,标题放在顶部。 注脚包含两个按钮,用于前进和后退功能。 html代码如下。
<div data-role="content"> Page: <span id="pageNumber"></span> of <span id="numPages"></span> <canvas id="canvas" width="360px" height="500px"></canvas> </div> <div data-role="footer" data-position="fixed"> <div data-role="tabbar"> <ul> <li onclick="nextPage()"><a id="next">Next</a></li> <li onclick="prevPage()"><a id="prev">Previous</a></li> </ul> </div> </div> </div>
Javascript
要显示PDF文档,库的输入为arraydata,这个XMLHttpRequest用于读取本地文件。 代码如下。
req = new XMLHttpRequest(); req.open("GET", url); req.setRequestHeader('Access-Control-Allow-Origin', '*'); req.mozResponseType = req.responseType = "arraybuffer"; req.expected = (document.URL.indexOf("file:") == 0) ? 0 : 200; req.onreadystatechange = function() { if (req.readyState == 4 && req.status == req.expected) { var data = req.mozResponseArrayBuffer || req.mozResponse || req.responseArrayBuffer || req.response; pdfDocument = new PDFDoc(new Stream(data)); numPages = pdfDocument.numPages; document.getElementById("numPages").innerHTML = numPages.toString(); displayPage(pageNum); } }; req.send(null);
在传递要显示的数字后,PDF库在2d画面区域创建图画。
function displayPage(num) { if (pageNum != num) window.clearTimeout(pageInterval); document.getElementById("pageNumber").innerHTML = num; var page = pdfDocument.getPage(pageNum = num); var ctx = canvas.getContext("2d"); ctx.save(); ctx.fillStyle = "rgb(255, 255, 255)"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.restore(); var gfx = new CanvasGraphics(ctx); var fonts = []; page.compile(gfx, fonts); var fontsReady = true; var count = fonts.length; for (var i = 0; i < count; i++) { var font = fonts[i]; if (fonts[font.name]) { fontsReady = fontsReady && !Fonts[font.name].loading; continue; } new Font(font.name, font.file, font.properties); fontsReady = false; } function delayLoadFont() { for (var i = 0; i < count; i++) { if (Fonts[font.name].loading) { return; } } clearInterval(pageInterval); page.display(gfx); }; if (fontsReady) { delayLoadFont(); } else { pageInterval = setInterval(delayLoadFont, 10); } }
要执行下一个和前一个操作,相应的页面数字设置到PDF库,并且在页面上画出文档内容。
function prevPage() { if(pageNum > 1) { displayPage(pageNum - 1); } } function nextPage() { if(pageNum < numPages) { displayPage(pageNum + 1); } }
屏幕截图
下面显示的是PDF阅读器的屏幕截图
文件附件:
评论:
适用于开发人员的提示