How to load PDF file into a webpage


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!

Advertisements

5 thoughts on “How to load PDF file into a webpage

  1. I Have Used Pdf.js and it worked fine with me. It was able to complex pdf file with tabular data and even heavy pdf file with ease the only problem i face is that it never open’s in safari. I hope in future they resolve it to. For now my clients are happy and project is running. 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s