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!
Its always better to hack around than... 
And one year later, the winner is pdf.js !
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. 🙂
Hey Midhunraj, glad to know. However, PDF.js is mozilla project which targets only Chrome and Firefox. And yes, they have improved it a lot in 4 years since I wrote the post.
Did u ever look at PDFObject? Does it work in chrome, IE 11/Edge and Safari?
Yes. Check the browser support here: https://pdfobject.com/