deck2pdf: Exporting HTML5 slide decks to PDF

30 July 2013

Tags: deckjs dzslides html5 impressjs javascript pdf revealjs slideshow

Exporting your awesome HTML5 presentation to PDF

For some time now, I’ve started using deck.js to write my talks. One of the reasons I do this is that it saves me lots of time when I have to copy and paste code, because I can rely on javascript code highlighting libraries to do the job. I can focus on contents instead of rendering. If I had a better knowledge of CSS, too, I could certainly write impressive presentations (but unfortunately, no, I’m not good at CSS).

The problem with HTML5 slideshows is that you are often asked to upload your slides as PDF. For example, SpeakerDeck, SlideShare or Parleys all require you to upload slides as PDF. None of them supports HTML5 (which is understandable because there are many frameworks available). While I did find some libraries that did the job (often in Perl or Ruby), I never managed to find one that actually worked properly.

Deck2pdf

That’s where it all started. I knew that JavaFX2 provided a WebView, which allowed rendering HTML pages with WebKit. What if I could use it to render my slide deck and export it to PDF? deck2pdf was born!. I started with something that was able to export my deck.js presentations, but I figured out very quickly that it could support other HTML5 presentation libraries quite easily. As of today, deck2pdf supports:

But more importantly, if your favorite HTML5 slideware is not supported, adding custom profiles is supported and fairly easy! Adding support for another library is as simple as adding a descriptor file with the javascript commands inside. For example, here’s how the deck.js profile is written:

totalSlides=$.deck('getSlides').length
nextSlide=$.deck('next')

That’s all! Support for more complex interactions is also provided using Groovy profiles, like for example in impress.js:

setup = {
    js 'var api = impress();'
    js '''var $$ = function ( selector, context ) {
        context = context || document;
        return context.querySelectorAll(selector);
    };'''
    js '''var byId = function ( id ) {
        return document.getElementById(id);
    };'''
}

nextSlide = {
    js('api.next()')
}

totalSlides = {
    js (/$$(".step", byId('impress')).length/)
}

// longer pause because of transitions
pause = 2000

Of course, deck2pdf is open source and licensed under APL2. Feel free to fork it and contribute new profiles! The home page of the project has documentation explaining how you can create your own. I’m waiting for your pull requests!