In our projects, one of the ad-hoc requirements that come in quite often is to display PDF files on a website. This sounds pretty easy in today’s web world with built-in PDF viewers in browsers with features such as ‘Zoom’, ‘Save’ and ‘Print’ which helps users save a file present on the server to his client side machine. From a developer perspective, it works well since HTML 5 tags allow us to open the PDF file directly on the browser (or even a small part in the browser).
It works great since it allows users to share information with a client where she/he has the liberty to utilize user driven actions and play with the file. However, it is also a challenge if a requirement merits that a user can access and read the file, but the document has to be kept confidential and not allow the client to save it at the client machine.
This can get tricky because as a developer, our job is to display the complete contents of the file, while restricting the user to download the file or even print it.
When this requirement came up in a project that I was working on, we used an open source tool called ViewerJS. This is built on HTML with JavaScript and helps open PDF and other open standards for office documents. It works perfectly well with major browsers such as Firefox, Chrome, IE 10 and above etc.
Internally it uses tried and tested tools like PDF.js and WebODF, both of which are JavaScript tools to work on PDF and Open standard for Office Documents. It gives clients all the features such as ‘Presentation View’, ‘Zoom’, ‘Print’ and ‘Download’. As it is an open source tool, we can tweak it as per our convenience. For one of the projects, I removed the options such as ‘Print’ and ‘Download’ since we did not need it.
And it’s extremely easy to use! All we need to do is to download the code from the website, unpack it and add it to our project website as per the instructions provided. It uses an <iframe> tag to embed the document in the web page. All we need to do is to get the source correctly defined with the location of the file.
<iframe src = "/ViewerJS/#../demo/pdfTest.pdf" width='400' height='300' allowfullscreen webkitallowfullscreen></iframe>
The width and height can be specified as per common formats like portrait, landscape or screen-sized.
Since we were looking at a complete solution, we added extra JavaScript code for restricting users to press ‘Ctr+C’, ‘Ctrl+V’, and ‘mouse down’ on the ViewerJS code itself. And voila! Our solution was ready.
This is a great tool because it is technology independent for web (only HTML and JavaScript) and open source which helps us customize it as per the project requirements.
