Annotating PDFs using JavaScript in the browser

Hi. I have met a requirement that has me stumped. One the one hand it is rather advanced, on the other I cannot believe that someone hasn’t done something similar already (actually bugherd is doing something pretty similar).

We have a system where all documents, images etc are converted PDF (legal/compliance reasons). The Idea is that everything is printable with predictable/robust page numbering for references etc.

Users would now like to view the documents (PDFs) and create their own private annotations. They must be able to create boxes, arrows and other drawing primitives, as well as write text anywhere on top of the PDF.

We need to capture the annotations so that we can save them in a database for that specific user. The reason is that the annotations should be considered personal/private. When the same user views the same PDF/page again, we need to display the annotations and let the user edit/delete/add annotations.

It occurs to me that we could convert the PDFs client-side to a html5 canvas. Annotations could then be performed within the bounds of the canvas.

The question is now: Does anyone here know of any open source or commercial product that will do this? Is there any way to combine a PDF-to-canvas renderer with some kind of annotation JavaScript library that was really intended for annotating web pages but can be used this?

1 Like

The only PDF->Canvas thing that I’m aware of is https://github.com/mozilla/pdf.js. I’ve never used it and have no idea if it meets any of your requirements, I just recall reading about it. My best uninformed guess is that you’d have to marry some sort of annotation system to your PDF/Canvas system manually - I doubt there’s anything pre-made out there.

That said, this topic is interesting - I may have to do something pretty similar relatively soon at work, so I’m interested to know what people can come up with to assist you here.

Edit: What server-side language(s) are we dealing with here on your platform?

Server side will be C# and ASP.NET MVC5, WebAPI 2 and SignalR. However we are all-in on angularjs and that tend to de-emphasize MVC a great deal (a good thing, IMO). I’d much rather have the controller/viewmodel in the browser, and we have noticed how the MVC bits are becoming really thin.

I got as far as Mozillas pdf.js as well. That could definitively work and then we’d just need an “annotation” framework. I seems like someone must have done that.

The only concern is that pdf.js was/is still experimental. And we are talking about legal documents here (as legal as they can possibly become, without going into specifics). If there is even a slight risk that the PDF is not being reproduced in full fidelity it is an immediate deal breaker.

However - there’s a fallback plan that we could possibly render the PDF to PNG serverside. There is no requirement that one is able to edit the PDF itself. Indeed - being legal documents - it is paramount that users cannot change the original PDF.

So, if worst comes to worst we can get half-way there. What we need is a good way to annotate a canvas or PNG clientside. We could create something rudimentary ourselves, but we would obviously rather use a good OS or commercial library.

1 Like

Is it a hard requirement to be able to annotate in the browser? Because it is possible to extract annotations from PDF documents. Thus a user would annotate PDF files in their own PDF client and upload the file. The server would then extract the annotations and save them in the DB. When the user requests the PDF again annotations would then be imported into the document, and the modified document would be served to the user.

Hi freakyrag, thanks for responding. Yes, unfortunately it is a hard requirement. Also, users must be able to annotate the same PDFs while keeping the annotations private - i.e. not visible to anyone but themselves. We cannot change the PDF.

I have found LEADTOOLS has something that may meet our requirements: http://demo.leadtools.com/HTML5/AnnotationsDemo/index.html

However, it seems a bit clunky and LEADTOOLS license policy is pretty hard to swallow (we would need to buy a number of developer seats as well as application licenses). I would obviously prefer an open source solution or something with a less draconian license (runtime royalty is a complete non-starter).

I’m looking at somethong similar, and have found Flexpaper , although I’m still evaluating it.

http://devaldi.com/annotations-html5-pdf-viewer/

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.