Parsing and Rendering PDF with PDF.js

PDF.js is a Javascript library implemented to render PDF built in accordance with HTML5 Canvas. This is an open source project led by the Mozilla Foundation
 
 You can use PDF.js on your website to parse and render PDF. PDF.js can work as a part of a website or of a browser. It is also part of ownCloud and there exists a Chrome plugin as well. PDF.js is implemented in such a way that it is able to parse raw arrays of bytes into streams of PDF bytecode and then compile the bytecode into Javascript programs and then execute those programs. This requires the PDF to be drawn on a HTML5 canvas. 
 
 In this post I will elaborate on implementing a simple PDF renderer with PDF.js. In order to proceed you should include both pdf.js and and pdf.worker.js associated with your html file where you render the PDF.

The code used to parse and render PDF can be found here;

1) create an html page having the div. #holder which will act as a container for rendering the PDF
 2) Declare global variables pdfDoc, pageNum and scale at the beginning of the script file. 
 3) window.onload function is used to load the PDF at page loading. 
 4) In function renderPDF(url), You can provide url to any pdf here or it can be a Unit8Array. Default scale will be 1.5 (150% zoomed). You can have alternative default values. 
5) PDFJS.disableWorker = true, This line of code is required because PDF.js uses Web Workers concept of HTML5 to process the request. If it is set to false, PDF.js will create an instance of web workers which will run in an isolated thread. 
7) In function base64ToUint8Array(base64), base64 is an encoded string. For this you can get the PDF byte array as a base-64 encoded string from server side and decode using the atob function. Atob is a native function that decodes a string of data which has been encoded using base-64 encoding. 
 8) The renderPage, function simply receives the page information such as the page view port according to the predifined scaling factor, resize the canvas according to the scaled viewport heiht and width and render the corresponding page of the pdf accordingly. And update the page numbers accordingly. 
 9) The goPrevious and goNext methods can be used to navigate between pages of the rendered PDF. 
10) Zoom function will again render the PDF by resizing the canvas dimensions. 

 You can refer to this link [1] and find more information regarding PDF.js 
 
 [1] http://mozilla.github.io/pdf.js/getting_started/

Show your support

Clapping shows how much you appreciated Sathya Bandara’s story.