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.
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.