❤
npm
Sign UpSign In

bespoke-pdf

1.1.3 • Public • Published

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 = require('bespoke'),
  pdf = require('bespoke-pdf');
 
bespoke.from('article', [
  pdf()
]);

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.from('article', [
  bespoke.plugins.pdf()
]);

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 = require('./package.json'),
  pdf = require('bespoke-pdf'),
  rimraf = require('gulp-rimraf');
 
gulp.task('pdf', ['connect'], function () { 
  return pdf(pkg.name + '.pdf')
    .pipe(gulp.dest('dist'));
});
 
gulp.task('clean:pdf', function() {
  return gulp.src('dist/' + pkg.name + '.pdf')
    .pipe(rimraf());
});

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

MIT License

Sponsorship

Sponsored by nearForm

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.1.3
    2
    • latest

Version History

Package Sidebar

Install

npm i bespoke-pdf

Repository

github.com/davidmarkclements/bespoke-pdf

Homepage

github.com/davidmarkclements/bespoke-pdf

Weekly Downloads

2

Version

1.1.3

License

none

Last publish

Collaborators

  • davidmarkclements
Try on RunKit
Report malware