DeckTape

DeckTape is a high-quality PDF exporter for HTML5 presentation frameworks. It supports all the features that you would expect from a PDF exporter like font embedding, selectable text, hyperlinks, SVG graphics objects, file compression.

DeckTape is built on top of PhantomJS which relies on Qt WebKit for laying out and rendering Web pages and provides a headless WebKit scriptable with a JavaScript API.

DeckTape currently supports the CSSS, deck.js, DZSlides, flowtime.js, HTML Slidy, impress.js, remark.js, reveal.js and Shower presentation frameworks out-of-the-box. Besides, DeckTape provides a generic command that emulates the end-user interaction and that can be used to convert presentations from virtually any kind of frameworks. That is particularly useful to support HTML presentation frameworks that don't expose any API nor accessible state, like Bespoke.js for example.

DeckTape's plugin-based architecture exposes an extension API so that it is possible to add support for other frameworks or tailored existing plugins to your specific needs.

DeckTape can optionally be used to capture screenshots of your slide decks in various resolutions, similarly to pageres. That can be useful to make sure your presentations are responsive or to create handouts for them.

You can browse some slide deck examples below that have been exported with DeckTape.

Install

From the command-line, follow the instructions below:

1. Shallow clone DeckTape Git repository:

   $ git clone --depth 1 https://github.com/astefanutti/decktape.git
   

2. Change into the decktape directory:

   $ cd decktape
   

3. Download PhantomJS executable: DeckTape currently depends on a forked version of PhantomJS. You can get the corresponding binaries for the platforms above:

   # Windows (MSVC 2013), 64-bit, for Windows Vista or later, bundles VC++ Runtime 2013
   $ curl -L http://astefanutti.github.io/decktape/downloads/phantomjs-msvc2013-win64.exe -o bin\phantomjs.exe
   # Mac OS X (Cocoa), 64-bit, for OS X 10.6 or later
   $ curl -L http://astefanutti.github.io/decktape/downloads/phantomjs-osx-cocoa-x86-64 -o bin/phantomjs
   # Linux (CentOS 6), 64-bit
   $ curl -L http://astefanutti.github.io/decktape/downloads/phantomjs-linux-centos6-x86-64 -o bin/phantomjs
   # Linux (CentOS 7), 64-bit
   $ curl -L http://astefanutti.github.io/decktape/downloads/phantomjs-linux-centos7-x86-64 -o bin/phantomjs
   # Linux (Debian 8), 64-bit
   $ curl -L http://astefanutti.github.io/decktape/downloads/phantomjs-linux-debian8-x86-64 -o bin/phantomjs
   

4. Set the execute permission for non-Windows OS binaries:

   $ chmod +x bin/phantomjs
   

If the executable isn't available for your target platform, see the Build section and follow the instructions. Alternatively, DeckTape provides a Docker image so that you can directly execute it with Docker. See the Docker section for more information.

Usage

Into DeckTape install directory:

$ ./bin/phantomjs decktape.js -h

Usage: phantomjs decktape.js [options] [command] <url> <filename>

command      one of: automatic, csss, deck, dzslides, flowtime, generic, impress,
             remark, reveal, shower, slidy
url          URL of the slides deck
filename     Filename of the output PDF file

Options:
   -s, --size                Size of the slides deck viewport: <width>x<height>  [1280x720]
   -p, --pause               Duration in milliseconds before each slide is exported  [1000]
   --screenshots             Capture each slide as an image  [false]
   --screenshots-directory   Screenshots output directory  [screenshots]
   --screenshots-size        Screenshots resolution, can be repeated  [--size]
   --screenshots-format      Screenshots image format, one of [jpg, png]  [png]

Defaults to the automatic command.
Iterates over the available plugins, picks the compatible one for presentation at the
specified <url> and uses it to export and write the PDF into the specified <filename>.

In addition to the general options listed above, command specific options can be displayed the following way:

$ ./bin/phantomjs decktape.js <command> -h

Commands

automatic

Iterates over the available plugins, picks the compatible one for presentation at the specified url and uses it to export and write the PDF into the specified filename.

generic

Emulates the end-user interaction by pressing the key with the specified keycode option and iterates over the presentation as long as:

• Any change to the DOM is detected by observing mutation events targeting the body element and its subtree,
• Nor the number of slides exported has reached the specified maxSlides option.

The keycode value must be one of the PhantomJS page event keys and defaults to Right, e.g.:

$ ./bin/phantomjs decktape.js generic --keycode=Space

Options

--screenshots

Captures each slide as an image at the screenshots-size resolution, exports it to the screenshots-format image format and writes the output into the screenshots-directory directory. The screenshots-size option can be set multiple times, e.g.:

$ ./bin/phantomjs decktape.js --screenshots --screenshots-size=400x300 --screenshots-size=800x600

Build

To build the forked version of PhantomJS whose DeckTape relies on, you have to execute the following commands from the DeckTape install directory:

1. Initialize and check out the phantomjs submodule:

   $ git submodule update --init --recursive
   

2. Change into the phantomjs directory:

   $ cd phantomjs
   

3. Launch the build script:

   $ ./build.py
   

More information can be found in Compiling PhantomJS from source and in Building Qt 5 from Git.

Docker

DeckTape can be executed within a Docker container from the command-line using the astefanutti/decktape Docker image available on Docker Hub:

$ docker run astefanutti/decktape -h

For example:

• To convert an online HTML presentation and have it exported into the working directory under the slides.pdf filename:

  $ docker run --rm -v `pwd`:/pwd astefanutti/decktape http://lab.hakim.se/reveal-js/ /pwd/slides.pdf
  

• Or, to convert an HTML presentation that's stored on the local file system in the home directory:

  $ docker run --rm -v `pwd`:/pwd -v ~:/home astefanutti/decktape /home/slides.html /pwd/slides.pdf
  

• Or, to convert an HTML presentation that's deployed on the local host:

  $ docker run --rm --net=host -v `pwd`:/pwd astefanutti/decktape http://localhost:8000 /pwd/slides.pdf
  

It is recommended to use the following options from the docker run command:

• --rm: DeckTape is meant to be run as a short-term foreground process so that it's not necessary to have the container’s file system persisted after DeckTape exits,
• -v: to mount a data volume so that DeckTape can directly write to the local file system.

Alternatively, you can use the docker cp command, e.g.:

# Run docker run without the --rm option
$ docker run astefanutti/decktape http://lab.hakim.se/reveal-js/ slides.pdf
# Copy the exported PDF from the latest used container to the local file system
$ docker cp `docker ps -lq`:decktape/slides.pdf .
# Finally remove the latest used container
$ docker rm `docker ps -lq`

Finally, if you want to execute DeckTape using a local clone of the DeckTape repository in order to take your changes into account, you can run:

$ docker run --rm -v `pwd`:`pwd` -w `pwd` astefanutti/decktape slides.html slides.pdf

Plugins

✏️

Examples

The following slide deck examples have been exported using DeckTape:

HTML5 Presentation	Framework	Exported PDF
Beyond Rectangles in Web Design	reveal.js 2.6.2	fowd-nyc-2014.pdf (14MB)
Getting Involved in Open Source	reveal.js 3.0.0	opensource-getting-involved.pdf (0.8MB)
Going Further with CDI	Asciidoctor + DZSlides	going-further-with-cdi.pdf (1.8MB)
Transactions for the REST of us	impress.js 0.5.3	soa-cloud-rest-tcc.pdf (10MB)
Deck.js Modern HTML Presentations	deck.js 1.1.0	deck-js-presentation.pdf (1.1MB)
Flowtime.js Presentation Framework	flowtime.js	flowtime-js-presentation.pdf (7.5MB)
The Official Remark Slideshow	remark.js 0.11.0	remark-js-slideshow.pdf (0.7MB)
HTML Slidy: Slide Shows in HTML and XHTML	HTML Slidy	html-slidy-presentation.pdf (0.5MB)
CSSS: CSS-based SlideShow System	CSSS	csss-sample-slideshow.pdf (13.5MB)
Shower Presentation Engine	Shower	shower-presentation-engine.pdf (0.4MB)
Welcome our new ES5 Overloards	Bespoke.js	new-es5-overloards.pdf (0.1MB)