The power of HTML 5 and Javascript: Rendering PDF’s in your browser

Today I was once again amazed about the power that HTML5 and Javascript can offer when I discovered PDF.js. This Javascript library is written by a couple of clever guys over at Mozilla and allows you to display PDFs inside your browser using Javascript and HTML5. The code is available for download on Github.

Benefits

The traditional approach to rendering PDFs in a browser is to use a native-code plugin, either Adobe’s own PDF Reader or other commercial renderers, or some open source alternative. From a security perspective, this enlarges the trusted code base and increases the risk of code based injection attacks. An HTML5-based implementation is completely immune to this class of problems.
If you want to see a demo of pdf.js, click on this link. There are still glitches and rendering artifacts but it already shows the potential of this library.

A quick sample

Download the latest code required from Github to start developing. Create a web page and embed the following Javascript references:

<script type="text/javascript" src="scripts/pdf.js"></script>  
<script type="text/javascript" src="scripts/metrics.js"></script>
<script type="text/javascript" src="scripts/fonts.js"></script>
<script type="text/javascript" src="scripts/glyphlist.js"></script>

Add the new <canvas> HTML5 control to the body of your page

<canvas id="pdf-canvas" style="border:1px solid black;"/>

Now you can start rendering your PDF by writing some Javascript code:

<script type="text/javascript">
'use strict';      
getPdf('myPDFFile.pdf', function getPdf(data) {
 // Instantiate PDFDoc with PDF data          
 var pdf = new PDFDoc(data);          
 var page = pdf.getPage(1);          
 var scale = 1.5;

 // Prepare canvas using PDF page dimensions          
 var canvas = document.getElementById('pdf-canvas');
 var context = canvas.getContext('2d');
 canvas.height = page.height * scale;
 canvas.width = page.width * scale;          
 
 // Render PDF page into canvas context
 page.startRendering(context);      
});  
</script>