With all the recent security problems in Adobe Acrobat and after reading about the new features of HTML5, I thought it would be interesting to build a PDF reader entirely with JavaScript and HTML5. Trapeze is still in its infancy and lacks full support for the PDF spec, but the majority of simple PDF’s render correctly using Firefox and Chrome. Although some will shudder at the thought of a JavaScript PDF reader, render speed for smaller PDF’s is relatively quick with today’s high performance JavaScript engines. Try out some sample files or use your own PDF’s (In testing Chrome is the stablest and quickest).

Trapeze uses many new features available in HTML5 including: canvas, web workers, drag/drop files, and some of the new file API’s. The new canvas element is the biggest piece that enables all the 2D drawing commands that a PDF needs to render correctly. Web workers are used to parse the PDF files in a another thread so the browser doesn’t lock up. Web workers also draw the PDF to what I call a FauxCanvas which basically just stores all the operations to the a fake canvas object and then sends them back to the main thread to apply them to the real canvas when its ready. Hopefully, in the future this will not be needed if an off screen canvas is made available to web workers. The drag and drop file opening was added just to see how it works.

Some of the limitations:

  • No ability to open a PDF from a URL. This is because cross site AJAX requests are not allowed by the browser. To get around this a proxy can be used, but I don’t currently have the funds to pay for the bandwidth a proxy pdf server would require.
  • Only tested in Firefox and Chrome.
  • Missing support for portions of the PDF spec (full color space support, pdf functions, patterns, certain image types, …).

This project would have been a lot more work without the help of some previous PDF reader programs such as pdf-renderer and PDFBox. Also, thanks to the developers of JQuery, Binary Functions for JavaScript, and several other external JavaScript libraries I used that can be found in the external folder.

The project source is available at https://github.com/brendandahl/trapeze-reader/