Overview

This Article demonstrates displaying PDF file on the Web Page. All the data and code is taken from open source library pdf.js.

PDF Reader Application

Now a days most of the books are available in soft copies. SmartPhone PDF Reader allows user to read the books or PDF based documents without using standard applications like Acrobat Reader ..etc. In this article mozilla based PDF.js library is used. Few lines of codes has been changed to work in Tizen Framework. For more details download the attached source code.

Prerequisites

The following open source javascript libraries has to be included in the html page

<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 Page

The web Page content contains a div elements for canvas area to render PDF files with header on the top for page reference. The footer contains two buttons for forward and backward functionality. The html code is shown below.

<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

To display the PDF document, the library accepts arraydata as input, for this XMLHttpRequest is used to read the local file. The code is shown below.

  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);

After passing the number to be displayed, the PDF library creates drawn on 2d canvas area.

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);
	  }
	}

To perform next and previous actions, corresponding page number is set to the PDF library and it draws the document content on the page.

function prevPage() {
	  if(pageNum > 1) {
	    displayPage(pageNum - 1);
	  }
	}

	function nextPage() {
	  if(pageNum < numPages) {
	    displayPage(pageNum + 1);
	  }
	}

Screenshots

Below is the screenshot of the PDF Reader is shown below