Wednesday, April 22nd, 2009
Dynamically Generated PDFs… with JavaScript?
Category: JavaScript
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.
Related Content:
- Export documents to HTML file with LotusScript
4.6 rating from 55 votes
Smooth as a baby bottom in Opera 9.6 & 10 too.
Firefox 3.1b3 fire up the PDF in an external reader though.
@p01: Hey, thx. Updated the post.
Also works on Mobile Safari (iPhone) and Firefox 3 :)
Examples for Jaxer and other Server-side Javascript platforms will follow when I’ve finished the font and image support.
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.
Brilliant!
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.
Another recommendation for Prince XML. It’s pricey, but it’s a joy to use.
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.
That is pretty smart & awesome!
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 :)
Yeah, PrinceXML is great. :)
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. ;)
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. :(
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.
Maybe we can reuse some of the code so javascript can display the pdf using canvas?
Data URIs are supported in IE8 . I haven’t tried the PDF demo but in theory it should work.
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…