概述

本文演示在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阅读器的屏幕截图