heckmeck!

Nerd content and
cringe since 1999

Alexander Grupe
Losso/ATW

Yes, creating JavaScript games with PDFs is cool and all…

(see: Doom, Tetris, Breakout, Snake, etc.)

…but you know what’s really cool? Creating PDF content with JavaScript!

Now, neither interactive PDFs nor PDF-generating JavaScript gizmos are really new, but I was unaware about the “dynamically create a PDF in the browser” part. I’ve been maintaining a cheat sheet for all my infodesk shifts at a well-known demoscene party, mainly for myself, but also in the hopes that it might be useful for my team mates. I’ve used LibreOffice (and later, InDesign) to manually assemble all the shifts and events into a handy one-pager. Needless to say, it was a nightmare to update, and error-prone on top.

Last year, I wondered: What if I could create all the timesheet minutiae automatically from the official sources (internal Wiki, JSON data of the events and airport busses) and forge it into a useful, aesthetically pleasing PDF?

Turns out: It’s easy and fun, thanks to the power of pdfmake.js. Again, this is neither new nor groundbreaking, but as someone who has gone through his fair share of PDF generation stunts in Java land – directly, exact, and cumbersome with iText, and through the horrid abstraction jungle of a HTML-to-PDF pipeline – this was really, really neat. An instance of “Look how far we’ve come!”, to me at least.

Here’s the timesheet tool I built, and in case it doesn’t work, here’s the PDF output. But it does work, even on your phone – we’re really living in the 21st century! :) Kudos to Bartek Pampuch and Libor M. of pdfmake, and Devon Govett of pdfkit.

PS: Also, the charming “full circle” nature of this process doesn’t escape me, with a client-side JavaScript PDF generation process at the start and a client-side JavaScript-based PDF display engine in the browser at the very end…

previous next close