Introducing Trapeze the Open-Source PDF Reader in JavaScript and HTML5

Tuesday, December 7th, 2010 at 6:03 pm

About
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).

HTML5
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, …).

Credits
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.

Source
The project source is available at http://code.google.com/p/trapeze-reader/

5 Responses to “Introducing Trapeze the Open-Source PDF Reader in JavaScript and HTML5”

  1. hi brendan

    this trapeze stuff is way cool!!! thanks a lot for sharing!

    html5, css3, jquery, php and now trapeze etc.: to me, the web is a giant box of legos with new, exciting pieces coming in all time & they’re even for free!

    whether php (i’m currently into design patterns, not because of the hype, but out of curiosity and to make my life easier) or javascript are ‘real’ programming languages or not i don’t care, they’ve become de facto standards, you can do a lot with them and also earn a living, so why bother? if something better comes up i’ll be highly interested (e.g. ‘node.js’ – nodejs.org – seems to hold some promise).

    best,
    peter

  2. nanomo says:

    Hi,

    Where can i download the files? the lists files on google code are empty (http://code.google.com/p/trapeze-reader/downloads/list)

    Thanks in advance!

  3. Brendan says:

    There currently isn’t an official release. To get the code you’ll need to check it out from the mecurial repository. See http://code.google.com/p/trapeze-reader/source/checkout

  4. Steven Lee says:

    It is really a great project.
    btw, do you know https://github.com/andreasgal/pdf.js it is a another similar project.

    and if you need php hosting, please contact with me, I can offer you.

  5. Brendan says:

    Funny you should mention that project. Next week I’ll actually be starting full time on mozilla’s pdf.js reader.

Leave a Reply