Html5 component for rendering and annotating PDF documents in the browser?

Question

I am trying to build a webapp that can view and annotate PDF files in a browser without flash player installed (like an iPad). Are there any free or cheap components that render a PDF in html, JS and canvas? Thanks!

Answer 1

Not that I am aware of. (I am assuming you googled for it, so I am skipping that). This is obviously a missing thing for the web -- (I found a toy implementation here: http://ajaxian.com/archives/wps-postscript-and-pdf-interpreter-for-html-5-canvas - but it is just a toy for now).

A serious product could adapt Ghostscript itself to Javascript using a project like http://code.google.com/p/emscripten/ -- which can compile C code to LLVM and then to javascript. There is an example of the entire Python interpreter built into javascript in this way running here: http://syntensity.com/static/python.html

Certainly it would not be trivial, and the output part to canvas, and UI, would need to be written anyway. I think it won't fit your needs now, but I am writing it here, so that maybe someone could make this happen.

In the mean time, you could consider running Ghostscript ( http://pages.cs.wisc.edu/~ghost/doc/intro.htm ) server side, and deliver pre-rendered PNG images to the browser. That would be far easier to do, although it would demand a lot of server juice.

Answer 2

I was looking for something similar recently:

pdf.js (by Andreas Gal @ mozilla inter alia) is under development with the goal to render PDF directly with HTML5 and JavaScript. It's on github [ https://github.com/andreasgal/pdf.js ]

It's worth reading the announcement post and comments (140+) [ http://andreasgal.com/2011/06/15/pdf-js/ ]

Answer 3

<iframe src="http://docs.google.com/gview?url=http://domain.com/pdf.pdf&embedded=true" 
style="width:600px; height:500px;" frameborder="0"></iframe>

Google docs allows you to embed PDFs, Microsoft Office Docs, and other applications by just linking to their services with an iframe. Its user-friendly, versatile, and attractive.

Answer 4

It depends on what "cheap" means, but I was looking for the same thing and think this HTML5 plugin for flexpaper could be a huge help, at least in terms of a starting place!

http://devaldi.com/annotations/index_html5.html

Actually just kidding. This is EXACTLY what I was looking for (3 hour later) Hope it helps! http://websanova.com/plugins/paint#websanova