object

How to load PDF file into a webpage

codef0rmer Fresh Fruits, Javascript , , , , , , , , , , , ,

I was recently working on a pdfViewer project wherein I wanted to render PDF file into a webpage and place some interactive elements (i.e. audio, video or a link) on top of it. During my research for existing JS libraries or plugins to simplify my task, I landed up making a categorized list of available tools which somewhat helped me to accomplish my job and also to know their approach to solve this problem on the web.

  • Having Adobe Acrobat or Built-In PDF viewer Dependencies: 
    •  pdfobject.com (http://pdfobject.com/): is an easy-to-use method for dynamically embedding PDF files into HTML documents. It uses JavaScript to generate and inject a standards friendly <object> element into your HTML file.
    • Using <object> or <iframe> tags : You can simply load any PDF file into an iframe or object tag which will be rendered by the PDF viewer plugin installed in your browser. It simply obviates the need of using pdfobject.js library.
  • Implementing custom PDF viewer in JavaScript:
    • HTML5 version of Flexpaper (http://flexpaper.devaldi.com/demo/) : For this to work, you have to convert entire PDF file into images using `convert` imageMagick tool (http://goo.gl/m8S9B) in Linux and rest of the things can be taken care by the viewer itself. In addition to this, it also supports custom zooming, text searching and selection, hand tool, layout options etc but unfortunately its paid.
    • Mozilla pdf.js (https://github.com/mozilla/pdf.js) : I’m really excited about this but for now it fails to render complicated PDFs (including complex tabular data). I hope that this project one day would replace the native or Adobe PDF plugin in the browser.
    • Trapeza (http://trapeze.xyrka.com/) : Faces problem while rendering complex PDFs like pdf.js.
  • For publicly available PDFs: 
    • Google Docs Viewer (https://docs.google.com/viewer) :  It’s a perfect choice (it is free) only If you have your PDFs publicly available and you believe that Google does no evil :-P.

Unfortunately, none of the above worked for me because rendering a PDF file into a webpage was not the only requirement I had. Iframe also works differently in different browsers which means Safari does not allow you to overlay other html elements on top of it but chrome does though they share the same rendering engine (webkit). And luckily bgIframe shim JavaScript plugin helps you get rid of z-index issues in IE.

Finally, ping me If something is missing in the list.  Sigh!

If you found this article useful in anyway, feel free to donate me and receive my dilettante painting as a token of appreciation for your donation.
Advertisement