Wednesday, April 22nd, 2009

Dynamically Generated PDFs… with JavaScript?

Category: JavaScript

<p>

In the “it-had-to-be-done-at-some-point” category, we give you James Hall’s latest project:

I have started working on jsPDF, an entirely Javascript-based PDF generator. Currently the demo serves up the generated PDF as a Data URI, but it could be used on the server side or within browser extensions. It currently only supports simple text, but I’m working on images and font embedding at the moment.

If you’re using Safari, Opera, or Firefox 3.5 Beta, the demo is pretty cool; the client-side JavaScript code generates a data URL which the browser displays.

Neat.

Posted by Ben Galbraith at 9:30 am
18 Comments

++++-
4.5 rating from 63 votes

18 Comments »

Comments feed TrackBack URI

Smooth as a baby bottom in Opera 9.6 & 10 too.
Firefox 3.1b3 fire up the PDF in an external reader though.

Comment by p01 — April 22, 2009

@p01: Hey, thx. Updated the post.

Comment by Ben Galbraith — April 22, 2009

Also works on Mobile Safari (iPhone) and Firefox 3 :)

Comment by MrRio — April 22, 2009

Examples for Jaxer and other Server-side Javascript platforms will follow when I’ve finished the font and image support.

Comment by MrRio — April 22, 2009

Great work!

jsPDF will also be of great use for Appcelerator Titanium applications.

Probably you can benefit from AlivePDF (http://alivepdf.bytearray.org/) which is a PDF creation engine for ActionScript3.

Comment by AndiSkater — April 22, 2009

Brilliant!

Comment by igstan — April 22, 2009

Very nice. If it can ever work as well as aspEasyPDF it’ll make a great replacement. I’m sure this can catch up pretty easily.

If you’re generating PDF out of html/xml, though, nothing can touch the functionality or performance of Prince XML.

Comment by smith — April 22, 2009

Another recommendation for Prince XML. It’s pricey, but it’s a joy to use.

Comment by bander — April 22, 2009

Haven’t tried Prince XML, but on the open-source side of things to do XHTML -> PDF, the Flying Saucer XHTML rendererer does a great job. It uses iText. I had theorized that using javascript to generate PDFs was possible, using data:URIs, so its cool to see someone actually do it. If I were tackling it I would try to port / compile the necessary parts of iText and Flying Saucer to javascript using GWT.

Comment by JonathanLeech — April 22, 2009

That is pretty smart & awesome!

Comment by BertrandLeRoy — April 22, 2009

Kudos indeed… I’ve unfortunately had to deal a lot with PDF generation over the years, I’ve seen and done quite a bit in that realm, but this is definitely a very cool first. You’ve made my “projects to watch” bookmarks list for sure :)

Comment by fzammetti — April 22, 2009

Yeah, PrinceXML is great. :)

Comment by MrRio — April 22, 2009

The interesting (/scary) thing with data: URIs and Javascript is, you can cook up just about anything (P01 and myself have experimented with data: in the favicon area, for example.) PDFs are a more-practical one, I’d say. ;)

Comment by Schill — April 22, 2009

Since it doesn’t work on IE 6/7/8 I see very little usage for this kind of thing in any production environment. IE is holding cool things like this back. :(

Comment by Spocke — April 23, 2009

I toyed with this idea about a year ago. Using a data URI with application/pdf as the mimetype and base64 encoded data, it’s possible to throw up generated PDF data in say an iframe.

I stopped working on it before I even really got started because IE doesn’t support data URIs – at least it didn’t up to 7 and I think 8 doesn’t either. Times have changed though, and it’s definitely becoming more popular to leverage modern browser capabilities and just ignore IE altogether. This is Bespin’s standpoint, and I believe MediaWiki has plans to support the html5 video tag (if they don’t already).

Good to see someone took the idea to the next step. I’ve felt that browser-generated PDFs are a long time coming.

Comment by jimbojw — April 23, 2009

Maybe we can reuse some of the code so javascript can display the pdf using canvas?

Comment by aw2xcd — April 23, 2009

Data URIs are supported in IE8 . I haven’t tried the PDF demo but in theory it should work.

Comment by fjakobs — April 24, 2009

fjakobs: IE8 gives this error:

Line: 72
Error: The data area passed to a system call is too small.

on this line:
document.location.href = url;

So, it doesn’t work…

Comment by m0sh3g — April 26, 2009

Leave a comment

You must be logged in to post a comment.