Coding Tips & Tricks


Home>Javascript

Rendering PDFs with pdf.js using HTML5 and JavaScript

The web is full of PDFs floating around out there. How many times have you tried to open a PDF file on a machine and not had the correct software installed? It can be very frustrating. For most users out there they already have the correct software installed to view PDFs, but as users move towards tablets or newer machines - they may not have it installed. Another issue is that often certain PDF readers and plugins don't support important PDF features - which is a bit of a problem if you want your website to be accessible to everyone out there and if you want all your users to have the same experience.


PDF.js Logo

A couple of clever guys over at Mozilla have thought about this and have come up with a genius way of displaying PDFs inside your browser using Javascript and HTML5. The code is available for download on Github. PDF.js is community-driven and supported by Mozilla Labs which means its good news for us as developers. In the long run this plugin is intended to render PDFs natively within Firefox itself and will eventually ship with Firefox. For now though, we can start using the power of this plugin within our applications today.

Here I am going to run through a simple implementation of PDF.js and show you how easy it is to use. First head on over to Github and download the latest code required to start developing.

Then create a web page and embed similar to the following page.

As you will notice, there is a file called HelloWorld.js in the HEAD tag of the code above. My HelloWorld.js file looks like the code below - but you can also include the code directly in your page instead of linking to the file externally.

I have created a simple demo page that showcases the features that PDF.js offers. Please click here to view.

When I was testing with different PDF files, I noticed that certain characters aren't quite supported yet. As this is still an experiment and a work in progress, I expect new developments and additions will be constantly added. Keep this in mind if you notice any irregularities when working with this.

Using PDF.js also brings a security improvement for our users. It uses only safe web languages and doesn’t contain any native code pieces attackers could exploit. The only disadvantage that I can think of when using this code is that it might not work on some older browsers, which either way they can still view the documents using a traditional PDF viewer. Hopefully a polyfill will arrive soon for older browsers. For further information take a look on Github and the PDF.js team's website.

Go ahead and start using PDF.js in your applications today!








Comments

Tim Acheson - 10/13/2011
As much as I detest the PDF format, and feel that it is inappropriate for the web, I have to admit that this is useful and pretty cool. ;)

Martin Rose - 10/16/2011
Awesome use of HTML5, I like it! Nice one Dean.

JK Rose - 5/12/2012
this example show one page at a time . but want to show the entire pdf document . i mean , if the pdf document has 20 pages , then i want to show al the 20 pages at a time , not one by one . how to do that ?? i see the code use to set the first page is var page = pdf.getPage(1);

Antonio - 6/26/2012
Just on question, I'm trying to use de PDF.JS script, but ca'nt display anything. I have downloaded the sources from github, and compile it, to create just one script for production, but I have some errors, my question is ¿have you just put the script in your html source?¿need something more?

srinivas - 11/21/2012
Hi I need help in this. I did installed and deployed on a tomcat server. But the service failed to display pdf file and give an exception. Some cases, it is outof memory and some cases it is arrays are not supported. can you help me geting point of contact who can address and let me the issue

Barry - 4/16/2013
how would i use this with turn.js for a number of pdf files each pdf is a page in a flipbook.

Gem - 10/6/2013
your example doesn't work!

lakshmignarayanan - 11/28/2013
this doesn't seem to work


Add your comment

300 Characters left


Please fill this in to confirm that you are human