bespoke-pdf
PDF generator for Bespoke.js
Bespoke Plugin
Download
Download the production version or the development version, or use a package manager.
Usage
bespoke-pdf
is simultaneously a bespoke plugin,
and a gulp task - the bespoke plugin provides hooks for
the gulp task. Both pieces are necessary.
This bespoke plugin is shipped in a UMD format, meaning that it is available as a CommonJS/AMD module or browser global.
For example, when using CommonJS modules:
var bespoke = pdf = ; bespoke;
Options
setup [Function]
bespoke.from('article', [
pdf({
setup: function () {
//prime slide environment for pdf output
//for instance, disable the "camera" slide or whatever
}
})
]);
delay [Number]
Delay before slide taking begins
evalDelay [Number]
Delay between each shot
When using browser globals:
bespoke;
Package managers
npm
$ npm install bespoke-pdf
Bower
$ bower install bespoke-pdf
Gulp Task
Once the bespoke-pdf has been included in a presentation, it can be integrated into a gulpfile.
For this part, bespoke-pdf must be installed via npm.
var pkg = pdf = rimraf = ; gulp; gulp;
PDF Output Customizations
In some cases, we don't want certain presentation visuals
landing in generated PDF's. During PDF generation, bespoke-pdf
adds a pdf
class to the root <html>
element.
We can use this class to style any part of the page,
e.g. in Stylus:
.pdf #my-fancy-overlay display none
Likewise there may be particular slides. Any hidden section
element will be removed from the deck prior to PDF generation.
For instance, say we're using bespoke-hash
and we have a
slide called named-route
, we could do
.pdf [data-bespoke-hash="named-route"] display none
bespoke-pdf
will detect this and remove the slide.
To enable the use markdown without littering it with
structural HTML tags, bespoke-pdf
also provides another
way to style and hide slides by adding a data-pdf-id
attribute based on the slides headline, which is determined
by the first h1
, h2
, h3
, h4
, h5
, li
, p
or span
element in that order.
For instance, say there's a slide with an h2
element
named "Emphatic Slide!". bespoke-pdf
automatically creates
a data-pdf-id
attribute with the value of emphatic-slide!
(we lowercase and replace spaces with dashes).
This allows us to remove it like so:
[data-pdf-id="emphatic-slide!"] display none
See the example/src/styles/main.styl
file for an
example of this - and notice that example/dist/presentation-hello-world.pdf
lacks the "Emphatic Slide!" slide.
License
Sponsorship
Sponsored by nearForm