Reveal.js: Export to PDF printing all slides to one page

Created on 22 Oct 2015 · 7Comments · Source: hakimel/reveal.js

I'm trying to export a colleague's presentation to PDF for archiving in a repository. For sake of argument, suppose that the location of the file is here:
file:///someplace/on/my/disk/foobar.html
Opening the page in any of Safari, Chrome, or Firefox renders the slides properly.
Trying
file:///someplace/on/my/disk/foobar.html?print-pdf
in Chrome, per the instructions, yields a single page with all slides overlaid in a jumble:

print_mess

I'm using OS X 10.9.5 with Chrome Version 46.0.2490.71 (64-bit).

Source

louabill

👍1

Most helpful comment

I just solved the same problem. Maybe you forget to add this part of script into the <head>.

<!-- Printing and PDF exports -->
<script>
    var link = document.createElement( 'link' );
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
    document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>

rainfore on 18 Nov 2015

👍3

All 7 comments

I just solved the same problem. Maybe you forget to add this part of script into the <head>.

<!-- Printing and PDF exports -->
<script>
    var link = document.createElement( 'link' );
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
    document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>

rainfore on 18 Nov 2015

👍3

You always need to check the print preview. Only in the preview you can see the final result as the preview applies the css rules for media print.

ebertmi on 18 Nov 2015

@rainfore: Thanks for the tip, but it didn't seem to fix the overprinting of everything onto one slide.

@waywaaard: The overprinting happens for previewing and physically printing, also.

louabill on 30 Nov 2015

I decided that perhaps I should start from scratch instead of using anything other than the html given to me by my colleague. So... I installed via the Full Setup, including cloning the latest repo and installing grunt.

I then typed the following into the address bar for Chrome:

http://localhost:8000/test/examples/barebones.html

to look at the 2-page bare-bones presentation which comes with the installation. So far so good.

I then typed

http://localhost:8000/test/examples/barebones.html?print-pdf

and ended up as before, with the entire presentation printing on one page.

I tried printing, and saw the same problem, all pages as one.

I tried adding the code supplied by @rainfore, to no avail.

I tried printing the example document in the documentation
http://lab.hakim.se/reveal-js/?print-pdf#/
and did get something which looked quite disjointed, but on separate pages.

So... any new tips would be appreciated.

louabill on 30 Nov 2015

👍1

reveal.js/test/examples/barebones.html this example does not support print-pdf. reveal.js/index.html this example in the root has full features. You can compare them:

https://github.com/hakimel/reveal.js/blob/master/test/examples/barebones.html
https://github.com/hakimel/reveal.js/blob/master/index.html

print-pdf is related to css/print/pdf.css, css/print/paper.css and head script I supplied above.

There is a simple way to have a try:

Just replace presentation content in reveal.js/index.html by your content. Do not change or remove scripts and css links. Then start the server, open http://localhost:8000/index.html and take a look.

Gook luck!

rainfore on 2 Dec 2015

@rainfore: Thanks again. By adding your printing snippet to barebones.html and then comparing that to index.html, I realized (after too long) that I didn't have the relative paths for the stylesheets correct (needed more ../../). Putting them into my colleague's presentation cleaned up the overprinting.

@waywaaard: Thanks for the advice on looking at the preview and ignoring the browser when printing. Saved a bunch of premature head-scratching.

Now I'm down to figuring out spacing problems...

louabill on 2 Dec 2015

@louabill What exactly did you do to fix it? I have the same issue, and when I look in the Chrome dev tools I don't have any .css files that are failing to load or anything.