astefanutti/decktape
1
1
Fork 0
mirror of https://github.com/astefanutti/decktape.git synced 2025-01-08 15:29:38 +03:00
Code Issues Projects Releases Wiki Activity

Update README

Browse Source
This commit is contained in:
Antonin Stefanutti 2017-08-21 10:21:52 +02:00
parent 820176b217
commit 15082133c2
1 changed files with 22 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
README.adoc
View File

@ -2,7 +2,7 @@
Antonin Stefanutti <https://github.com/astefanutti[@astefanutti]> Antonin Stefanutti <https://github.com/astefanutti[@astefanutti]>
// Meta // Meta
:description: DeckTape is a high-quality PDF exporter for HTML5 presentation frameworks. :description: DeckTape is a high-quality PDF exporter for HTML5 presentation frameworks.
:decktape-version: 1.0.0 :decktape-version: 2.0.0
:decktape-tag: v{decktape-version} :decktape-tag: v{decktape-version}
// Settings // Settings
:idprefix: :idprefix:
@ -30,20 +30,14 @@ endif::[]
// URIs // URIs
:uri-decktape-release: https://github.com/astefanutti/decktape/releases/latest :uri-decktape-release: https://github.com/astefanutti/decktape/releases/latest
:uri-phantomjs: http://phantomjs.org :uri-puppeteer: https://github.com/GoogleChrome/puppeteer
:uri-phantomjs-download: https://github.com/astefanutti/decktape/releases/download/{decktape-tag} :uri-w3c-uievents-key: https://www.w3.org/TR/uievents-key/
:uri-phantomjs-build: {uri-phantomjs}/build.html
:uri-phantomjs-fork: https://github.com/astefanutti/phantomjs/commits/decktape
:uri-phantomjs-page-event-keys: https://github.com/ariya/phantomjs/blob/cab2635e66d74b7e665c44400b8b20a8f225153a/src/modules/webpage.js#L329
:uri-docker: https://www.docker.com :uri-docker: https://www.docker.com
:uri-docker-hub: https://hub.docker.com :uri-docker-hub: https://hub.docker.com
:uri-docker-image: https://hub.docker.com/r/astefanutti/decktape :uri-docker-image: https://hub.docker.com/r/astefanutti/decktape
:uri-docker-ref: http://docs.docker.com/engine/reference :uri-docker-ref: http://docs.docker.com/engine/reference
:uri-qt-webkit: https://wiki.qt.io/Qt_WebKit
:uri-qt-webkit-build: https://wiki.qt.io/Building_Qt_5_from_Git
:uri-bespokejs: http://markdalgleish.com/projects/bespoke.js :uri-bespokejs: http://markdalgleish.com/projects/bespoke.js
:uri-csss: http://leaverou.github.io/csss :uri-csss: http://leaverou.github.io/csss
:uri-deckjs: http://imakewebthings.com/deck.js :uri-deckjs: http://imakewebthings.com/deck.js
@ -60,9 +54,7 @@ endif::[]
{description} {description}
DeckTape 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 {uri-puppeteer}[Puppeteer] which relies on Google Chrome for laying out and rendering Web pages and provides a headless Chrome instance scriptable with a JavaScript API.
DeckTape is built on top of {uri-phantomjs}[PhantomJS] which relies on {uri-qt-webkit}[Qt WebKit] for laying out and rendering Web pages and provides a headless WebKit scriptable with a JavaScript API.
NOTE: DeckTape 2.0 beta is available and now uses headless Chrome to render Web pages. See the https://github.com/astefanutti/decktape/tree/2.x[2.x] branch for more information. NOTE: DeckTape 2.0 beta is available and now uses headless Chrome to render Web pages. See the https://github.com/astefanutti/decktape/tree/2.x[2.x] branch for more information.
@ -87,50 +79,22 @@ You can browse some slide deck <<examples,examples>> below that have been export
== Install == Install
You can install DeckTape by downloading the source and executable manually from the {uri-decktape-release}[latest release], or by executing the instructions below from the command-line: === NPM
. Download DeckTape source: Install DeckTape globally and run it:
+
[subs=attributes+]
$ curl -L https://github.com/astefanutti/decktape/archive/{decktape-tag}.tar.gz | tar -xz --exclude phantomjs
. Change into the `decktape` directory: ```sh
+ $ npm install -g decktape
[subs=attributes+] $ decktape
$ cd decktape-{decktape-version} ```
. Download PhantomJS executable:
+
--
NOTE: DeckTape currently depends on a <<phantomjs,forked version>> of PhantomJS.
What follows is a list of pre-compiled binaries for various platforms.
[source,shell,subs=attributes+]
# Windows (MSVC 2013), for Windows Vista or later, bundles VC++ Runtime 2013
$ curl -L {uri-phantomjs-download}/phantomjs-msvc2013-x86.exe -o phantomjs.exe
# Mac OS X (Cocoa), 64-bit, for OS X 10.6 or later
$ curl -L {uri-phantomjs-download}/phantomjs-osx-cocoa-x86-64 -o phantomjs
# Linux (static build), 64-bit, requires fontconfig (CentOS) or libfontconfig (Debian, Ubuntu)
$ curl -L {uri-phantomjs-download}/phantomjs-linux-x86-64 -o phantomjs
--
. Set the execute permission (non-Windows OS binaries only):
$ chmod +x phantomjs
If the executable isn't available for your target platform, follow the instructions in the <<build>> section.
Alternatively, DeckTape provides a {uri-docker-image}[Docker image] so that you can directly execute it with {uri-docker}[Docker].
See the <<docker>> section for more information.
== Usage == Usage
Inside the DeckTape install directory, run:
[source] [source]
---- ----
$ ./phantomjs decktape.js -h $ decktape -h
Usage: phantomjs decktape.js [options] [command] <url> <filename> Usage: decktape [options] [command] <url> <filename>
command one of: automatic, bespoke, csss, deck, dzslides, flowtime, generic, impress, command one of: automatic, bespoke, csss, deck, dzslides, flowtime, generic, impress,
remark, reveal, shower, slidy, webslides remark, reveal, shower, slidy, webslides
@ -156,7 +120,7 @@ specified <url> and uses it to export and write the PDF into the specified <file
In addition to the general options listed above, command specific options can be displayed the following way: In addition to the general options listed above, command specific options can be displayed the following way:
$ ./phantomjs decktape.js <command> -h $ decktape <command> -h
== Commands == Commands
@ -168,25 +132,15 @@ Iterates over the available link:plugins[], picks the compatible one for present
[#generic] [#generic]
=== `generic` === `generic`
Emulates the end-user interaction by pressing the key with the specified `--keycode` option and iterates over the presentation as long as: Emulates the end-user interaction by pressing the key with the specified `--key` option and iterates over the presentation as long as:
[loweralpha] [loweralpha]
. Any change to the DOM is detected by observing mutation events targeting the body element and its subtree nor . 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 `--max-slides` option. . the number of slides exported has reached the specified `--max-slides` option.
The `--keycode` value must be one of the {uri-phantomjs-page-event-keys}[PhantomJS page event keys] and defaults to `Right`, e.g.: The `--key` value must be one of the {uri-w3c-uievents-key}[UI events `KeyboardEvent` key values] and defaults to `ArrowRight`, e.g.:
$ ./phantomjs decktape.js generic --keycode=Space $ decktape generic --key=ArrowDown
=== `webslides`
PhantomJS doesn't support flexbox very well and WebSlides makes heavy use of flexbox.
For DeckTape to print WebSlides properly, it'll need the right vendor prefixes on the flexbox attributes.
In https://github.com/jlantunez/webslides/blob/master/static/css/base.css#L3147[base.css line 3147] change `display: block !important;` to `display: flex: !important` and run base.css through https://autoprefixer.github.io/ with filter `safari >= 4`.
For more info why the vendor prefixes are necessary, check the https://github.com/jlantunez/webslides/issues/5[Issue on WebSlides] or the https://github.com/ariya/phantomjs/issues/14365[Issue on PhantomJS].
PhantomJS 2.5 will support flexbox. The prefixing of the CSS will be unnecessary once PhantomJS v2.5 has been released and the DeckTape fork has been rebased on v2.5.
== Options == Options
@ -196,7 +150,7 @@ Captures each slide as an image at the `--screenshots-size` resolution, exports
The `--screenshots-size` option can be set multiple times. For example: The `--screenshots-size` option can be set multiple times. For example:
$ ./phantomjs decktape.js --screenshots --screenshots-size=400x300 --screenshots-size=800x600 $ decktape --screenshots --screenshots-size=400x300 --screenshots-size=800x600
=== `--slides` === `--slides`
@ -205,13 +159,13 @@ Exports only the slides specified as a series of slides indexes and ranges, e.g.
[source,shell] [source,shell]
---- ----
# Capture a single slide # Capture a single slide
$ ./phantomjs decktape.js --slides 1 $ decktape --slides 1
# Capture a series of slides # Capture a series of slides
$ ./phantomjs decktape.js --slides 1,3,5 $ decktape --slides 1,3,5
# Capture a range of slides # Capture a range of slides
$ ./phantomjs decktape.js --slides 1-10 $ decktape --slides 1-10
# Capture a combination of slides and ranges # Capture a combination of slides and ranges
$ ./phantomjs decktape.js --slides 1,2,5-10 $ decktape --slides 1,2,5-10
---- ----
The rendering stops and the file written out after the largest numbered slide is exported. The rendering stops and the file written out after the largest numbered slide is exported.
@ -244,7 +198,7 @@ The following slide deck examples have been exported using DeckTape:
|deck.js `1.1.0` |deck.js `1.1.0`
|https://astefanutti.github.io/decktape/examples/deck-js-presentation.pdf[deck-js-presentation.pdf] (1.1MB) |https://astefanutti.github.io/decktape/examples/deck-js-presentation.pdf[deck-js-presentation.pdf] (1.1MB)
|http://flowtime-js.marcolago.com[Flowtime.js Presentation Framework] |https://marcolago.github.io/flowtime.js/[Flowtime.js Presentation Framework]
|Flowtime.js |Flowtime.js
|https://astefanutti.github.io/decktape/examples/flowtime-js-presentation.pdf[flowtime-js-presentation.pdf] (7.5MB) |https://astefanutti.github.io/decktape/examples/flowtime-js-presentation.pdf[flowtime-js-presentation.pdf] (7.5MB)
@ -313,67 +267,6 @@ Finally, if you want to execute DeckTape using a local clone of the DeckTape rep
[source,shell] [source,shell]
$ docker run --rm -v `pwd`:`pwd` -w `pwd` astefanutti/decktape slides.html slides.pdf $ docker run --rm -v `pwd`:`pwd` -w `pwd` astefanutti/decktape slides.html slides.pdf
== PhantomJS
=== Overview
DeckTape relies on a {uri-phantomjs-fork}[forked version] of PhantomJS, which is maintained as a submodule of this project.
The fork primarily adds a printer API to PhantomJS that allows DeckTape to generate a multi-page PDF document.
By default, PhantomJS can only produce a single-page PDF for each capture.
=== Status
Our goal is to get all the patches from this fork merged into the upstream so the fork is no longer required.
The following table documents the patches we've made to PhantomJS and tracks the status of getting them merged into the upstream project.
|===
|Description |Reference to Patch |Merge Status
|Printer module API
|https://github.com/astefanutti/phantomjs/commit/f0259c95942a24163eb16ef19887cc313525573d[astefanutti/phantomjs@f0259c9]
|{icon-exclamation} todo
|Add support for capturing viewport when rendering images (required to capture snapshots properly)
https://github.com/ariya/phantomjs/issues/10619[ariya/phantomjs#10619]
|https://github.com/ariya/phantomjs/commit/bfccbd65f2855d38b9c8d826813315857b6379b0[ariya/phantomjs@bfccbd6]
|{icon-check} merged
|Enable outline annotations to be rendered outside printing context (required for clickable hyperlinks with the printer module)
|https://github.com/astefanutti/qtwebkit/commit/9f8fd880e7e40ad184a72ed0d8a5779918739583[astefanutti/qtwebkit@9f8fd88]
|{icon-exclamation-dim} todo
|Render anchors as clickable links in PDF documents https://bugreports.qt.io/browse/QTBUG-44563[QTBUG-44563]
|https://github.com/qt/qtwebkit/commit/62dd2add32c7c4d5d409d457c818ac88c952e7f6[qt/qtwebkit@62dd2ad]
|{icon-check} merged
|Add support for drawing a hyperlink in `QPdfEngine` https://bugreports.qt.io/browse/QTBUG-44563[QTBUG-44563]
|https://github.com/qt/qtbase/commit/e9eeb68a656bd52c4a783dc4247c627c5363209a[qt/qtbase@e9eeb68]
|{icon-check} merged
|Web fonts are not embedded in PDF on Linux and render as vector outlines https://bugreports.qt.io/browse/QTBUG-52417[QTBUG-52417] https://github.com/ariya/phantomjs/issues/13997[ariya/phantomjs#13997]
|https://github.com/astefanutti/qtbase/commit/cf12105f0ad516a72d4018885b37f415d53a5564[astefanutti/qtbase@cf12105]
|{icon-exclamation-dim} todo
|===
=== Build
To build the {uri-phantomjs-fork}[forked version] of PhantomJS for DeckTape, you have to execute the following commands:
. Clone the `phantomjs` repository:
$ git clone https://github.com/astefanutti/phantomjs.git
. Change into the `phantomjs` directory:
$ cd phantomjs
. Launch the build script:
$ ./build.py
More information can be found in {uri-phantomjs-build}[Compiling PhantomJS from source] and in {uri-qt-webkit-build}[Building Qt 5 from Git].
== Plugin API == Plugin API
{icon-edit} {icon-edit}