PDF files are a great way of presenting information for download and print purposes. The file format is used widely across the Internet. In order to view PDF files either the audience needs to have a PDF reader installed on their device or in some cases certain browsers have a reader built-in (such as the latest versions of Firefox). 

In many cases though it is preferable to be able to view content PDF directly through the browser without having to go through the download process (which is in some cases simplified by the browser but in other cases the process can be a little fragmented which doesn't help the audience focus on the information itself). The team at Mozilla have developed a Javascript based solution that allows PDFs to be presented through modern browsers natively without a 3rd party reader plugin. We've used this and then extended it to include the ability to view the PDF as a magazine style presentation (flip book, page turning application).

The flip book or magazine presentation style uses the turn.js library which we've integrated into the viewer to provide the start of a full publishing solution for PDFs through html5. It is still in it's early stages and is by no means complete (or perfectly implemented) but it shows the potential.

In developing the idea of presenting PDFs directly through the browser we've been through a number of different ideas such as pre-processing the PDF and converting each page to an image. This worked well and was the simplest solution to implement however this means holding images for all pages of the document in various sizes to allow zooming. This all takes up space in a hosting environment so the later ideas using PDF.js to allow the client to render the document using html5 elements seemed much cleaner. There are use cases for both methods however the PDF.js solution seems like it has the most potential.

Using this tool can greatly improve the reach of your PDF based information to your audience making it seem part of your website as opposed to a separate file download. The basic viewer provides many of the tools you'd expect from a PDF reader such as searching, zooming, printing, working hyperlinks and so on.

See an example of the reader here (including the magazine presentation style): /viewer/viewer.html?file=pdf1.pdf

To go to the magazine view click on the "magazine mode" button in the tool bar.

See an example of the basic reader here: /pdfjs/viewer.html?file=/viewer/pdf1.pdf

 

 

Basic viewer embedded in an iframe

Augmented magazine view embedded in an iframe

For more information on the libraries used see the following:

https://mozilla.github.io/pdf.js/

http://www.turnjs.com/ 

For Umbraco CMS users we've release a package that easily allows you to include a PDF.js viewer into your Umbraco CMS based website:

https://our.umbraco.org/projects/website-utilities/pdfjs-viewer/

 

Other Articles

Digital Company of the Year Flint Studios establishes GB base through strategic merger

Digital Company of the Year Flint Studios establishes GB base through strategic merger

A Belfast-based digital agency has established a presence in Great Britain through a merger with Cheshire-based Link Information Technology Ltd., a specialist provider of web solutions.

Changes to Google's search algorithm in 2016

Changes to Google's search algorithm in 2016

In this article we review what changes Google have planned for their search algorithm in 2016 as well as discuss the available options to avoid losing search rankings.

RIP Internet Explorer 8, 9 and 10

RIP Internet Explorer 8, 9 and 10

If you still use an old version of Internet Explorer, it’s probably time to upgrade. Microsoft has confirmed that it will stop supporting IE 8, 9 and 10 on Tuesday 12th January, marking an end to security updates and technical support for u…