New PDF export issue #808

Closed
trws opened this Issue Feb 25, 2014 · 27 comments

Comments

Projects
None yet
@trws

trws commented Feb 25, 2014

I have been using, and loving, reveal.js and the pdf export functionality for a couple of weeks now, but something strange started happening yesterday, I think after a chrome update (I'm currently running Google Chrome version 33.0.1750.117). The issue is that the currently selected slide prints to pdf fine, but several slides before or after it end up blank or with just the background. After some number of slides it starts working as expected again. Just to check and see if it was my local copy somehow being corrupted, I printed the example presentation from the official site, and got this.

https://www.dropbox.com/s/hg4hloglims45sp/reveal.pdf

There are no errors in the javascript log, and everything looks normal except printing. I'm at a loss, any thoughts on how I might debug this?

@hakimel

This comment has been minimized.

Show comment Hide comment
@hakimel

hakimel Feb 25, 2014

Owner

Seeing this too, I suspect you're right that this is related to a browser update.

Owner

hakimel commented Feb 25, 2014

Seeing this too, I suspect you're right that this is related to a browser update.

@aitjcize

This comment has been minimized.

Show comment Hide comment
@aitjcize

aitjcize Feb 26, 2014

same problem here!

same problem here!

@fehmer

This comment has been minimized.

Show comment Hide comment
@fehmer

fehmer Feb 26, 2014

Contributor

+1

Contributor

fehmer commented Feb 26, 2014

+1

@krimple

This comment has been minimized.

Show comment Hide comment
@krimple

krimple Feb 26, 2014

I have this problem - I use my own theme, and I get several blank pages where pages should be. I can sort of print in FireFox but it truncates the text.

krimple commented Feb 26, 2014

I have this problem - I use my own theme, and I get several blank pages where pages should be. I can sort of print in FireFox but it truncates the text.

@trws

This comment has been minimized.

Show comment Hide comment
@trws

trws Feb 26, 2014

If any of you have Safari available, it seems to at least work. Not ideally mind you, it inserts a blank slide between each slide and the next, but at least it renders them all.

trws commented Feb 26, 2014

If any of you have Safari available, it seems to at least work. Not ideally mind you, it inserts a blank slide between each slide and the next, but at least it renders them all.

@hakimel

This comment has been minimized.

Show comment Hide comment
@hakimel

hakimel Feb 28, 2014

Owner

Tracked this down. It's related to how the pdf stylesheet gets included. A temporary workaround is to replace the following lines in the <head> before printing:

<script>
    document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
</script>

with

<link rel="stylesheet" href="css/print/pdf.css">
Owner

hakimel commented Feb 28, 2014

Tracked this down. It's related to how the pdf stylesheet gets included. A temporary workaround is to replace the following lines in the <head> before printing:

<script>
    document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
</script>

with

<link rel="stylesheet" href="css/print/pdf.css">
@hakimel

This comment has been minimized.

Show comment Hide comment
@hakimel

hakimel Feb 28, 2014

Owner

This issue has been fixed in master.

PDF printing in Chrome 33 did not work correctly so long as media="print" was defined on the dynamically inserted PDF stylesheet. The media definition has been removed which should be fine since the styles are only included when the page is loaded with ?print-pdf anyway.

Owner

hakimel commented Feb 28, 2014

This issue has been fixed in master.

PDF printing in Chrome 33 did not work correctly so long as media="print" was defined on the dynamically inserted PDF stylesheet. The media definition has been removed which should be fine since the styles are only included when the page is loaded with ?print-pdf anyway.

@hakimel hakimel closed this Feb 28, 2014

@aitjcize

This comment has been minimized.

Show comment Hide comment
@aitjcize

aitjcize Feb 28, 2014

Thanks for the quick fix!

Thanks for the quick fix!

@trws

This comment has been minimized.

Show comment Hide comment
@trws

trws Feb 28, 2014

Works for me, thank you.

trws commented Feb 28, 2014

Works for me, thank you.

krisajenkins added a commit to krisajenkins/org-reveal that referenced this issue Mar 5, 2014

Fixing a bug with export to PDF.
Chrome 33 caused (revealed?) a bug in the PDF export code. This was
fixed in reveal.js issue 808:

 hakimel/reveal.js#808

This commit mirrors that fix for org-reveal.

@krisajenkins krisajenkins referenced this issue in yjwen/org-reveal Mar 5, 2014

Closed

Fixing a bug with export to PDF. #44

rctay added a commit to rctay/pandoc-templates that referenced this issue Mar 11, 2014

revealjs: backport hakimel/reveal.js@08fb6cb to fix printing in Chrom…
…e 33 (hakimel/reveal.js#808)

The fix involves removing the media definition of print on pdf.css, ie.
applying pdf.css in a blanket fashion, so pdf.css has to be inserted via
JavaScript (when ?print-pdf is in the url). Hence the JavaScript.

laughedelic added a commit to era7bio/pandoc-revealjs-slides that referenced this issue Mar 12, 2014

aaronbloomfield added a commit to aaronbloomfield/pdr that referenced this issue Mar 19, 2014

Updated to the latest reveal.js (1:15 am on 3-19-14), which fixed a b…
…ug (hakimel/reveal.js#808) that prevented printing with the latest Chrome; note that css/themes/default.css was left as was due to the different paths (and it wasn't modified anyway)

nbren12 added a commit to nbren12/org-reveal that referenced this issue Mar 25, 2014

nbren12 added a commit to nbren12/org-reveal that referenced this issue Mar 25, 2014

fixed pdf export issue
I implement the fix in hakimel/reveal.js#808 exactly.
This commit requires the use of a ?print-pdf modifier to the URL as detailed in
the issue above.

@nbren12 nbren12 referenced this issue in yjwen/org-reveal Mar 25, 2014

Merged

fixed pdf export issue #48

@davidlt

This comment has been minimized.

Show comment Hide comment
@davidlt

davidlt Mar 28, 2014

Still fails on Chrome dev channel (version 35).

davidlt commented Mar 28, 2014

Still fails on Chrome dev channel (version 35).

@hakimel

This comment has been minimized.

Show comment Hide comment
@hakimel

hakimel Mar 28, 2014

Owner

I tried printing lab.hakim.se/reveal-js using Chrome 35.0.1914.0 and that works.

Owner

hakimel commented Mar 28, 2014

I tried printing lab.hakim.se/reveal-js using Chrome 35.0.1914.0 and that works.

@davidlt

This comment has been minimized.

Show comment Hide comment
@davidlt

davidlt Mar 28, 2014

I was testing on Introduction to MATLAB example. lab.hakim.se/reveal-js works.

davidlt commented Mar 28, 2014

I was testing on Introduction to MATLAB example. lab.hakim.se/reveal-js works.

@Kabouik

This comment has been minimized.

Show comment Hide comment
@Kabouik

Kabouik Mar 30, 2014

Pdf-export of my own slides fails with Chrome 33.0.1750.154 version too. lab.hakim.se/reveal-js seems to work properly here too.

Cannot share my presentation for professional reasons however, so my comment might not help finding the issue, but it's just to confirm there are some issues.

Kabouik commented Mar 30, 2014

Pdf-export of my own slides fails with Chrome 33.0.1750.154 version too. lab.hakim.se/reveal-js seems to work properly here too.

Cannot share my presentation for professional reasons however, so my comment might not help finding the issue, but it's just to confirm there are some issues.

@hakimel

This comment has been minimized.

Show comment Hide comment
@hakimel

hakimel Mar 30, 2014

Owner

Those of you who are still having issues, please make sure that the fix I committed above (08fb6cb) has been merged into your local index.html.

Owner

hakimel commented Mar 30, 2014

Those of you who are still having issues, please make sure that the fix I committed above (08fb6cb) has been merged into your local index.html.

@Kabouik

This comment has been minimized.

Show comment Hide comment
@Kabouik

Kabouik Mar 30, 2014

Awesome, it (mostly) works. Thanks and sorry I missed it Hakimel.

I still have issues with div superimposing with stuff, but that's due the way I conceived my slides with animation of elements disappearing and being replaced by others.

Is there any way to create a "pdf slide" for every data-fragment-index value within a section? That would decompose every "animation" in new slides. It would solve such issues, and overall the PDF exports would be closer to the actual reveal.js presentations (fragments would be mimicked).

Kabouik commented Mar 30, 2014

Awesome, it (mostly) works. Thanks and sorry I missed it Hakimel.

I still have issues with div superimposing with stuff, but that's due the way I conceived my slides with animation of elements disappearing and being replaced by others.

Is there any way to create a "pdf slide" for every data-fragment-index value within a section? That would decompose every "animation" in new slides. It would solve such issues, and overall the PDF exports would be closer to the actual reveal.js presentations (fragments would be mimicked).

@dpashkevich

This comment has been minimized.

Show comment Hide comment
@dpashkevich

dpashkevich Apr 5, 2014

Is there any way to create a "pdf slide" for every data-fragment-index value within a section? That would decompose every "animation" in new slides. It would solve such issues, and overall the PDF exports would be closer to the actual reveal.js presentations (fragments would be mimicked).

Would love to see that too

Is there any way to create a "pdf slide" for every data-fragment-index value within a section? That would decompose every "animation" in new slides. It would solve such issues, and overall the PDF exports would be closer to the actual reveal.js presentations (fragments would be mimicked).

Would love to see that too

@kevinkenan kevinkenan referenced this issue in jgm/pandoc Apr 5, 2014

Closed

PDF Save in revealjs broken #1220

@nategood

This comment has been minimized.

Show comment Hide comment
@nategood

nategood Jun 3, 2014

Printing the example "lab.hakim.se/reveal-js" presentation is broken for me in current latest Chrome (Version 35.0.1916.114 beta), FireFox (29.0.1), and Safari (Version 7.0.2 (9537.74.9)).

I see no styling at all. Just plain un-styled text. In some cases it is so broken that I just get blank pages.

I'm wondering if there isn't a stabler means of printing than relying on print media for something this complicated. I recall hearing @mbostock talking about a project they built at NYT that I believe used PhantomJS among other things to take browser snapshots of each commit in a git repo. Maybe something similar can be done to make a more stable solution? Spitballing here, but the current option seems fairly unreliable.

nategood commented Jun 3, 2014

Printing the example "lab.hakim.se/reveal-js" presentation is broken for me in current latest Chrome (Version 35.0.1916.114 beta), FireFox (29.0.1), and Safari (Version 7.0.2 (9537.74.9)).

I see no styling at all. Just plain un-styled text. In some cases it is so broken that I just get blank pages.

I'm wondering if there isn't a stabler means of printing than relying on print media for something this complicated. I recall hearing @mbostock talking about a project they built at NYT that I believe used PhantomJS among other things to take browser snapshots of each commit in a git repo. Maybe something similar can be done to make a more stable solution? Spitballing here, but the current option seems fairly unreliable.

@dpashkevich

This comment has been minimized.

Show comment Hide comment
@dpashkevich

dpashkevich Jun 3, 2014

Nate, did you add ?print-pdf to que query string before printing out the
presentation?

Dmitry Pashkevich
On Jun 3, 2014 9:48 AM, "Nate Good" notifications@github.com wrote:

Printing the example "lab.hakim.se/reveal-js" presentation is broken for
me in current latest Chrome (Version 35.0.1916.114 beta), FireFox (29.0.1),
and Safari (Version 7.0.2 (9537.74.9)).

I see no styling at all. Just plain un-styled text. In some cases it is so
broken that I just get blank pages.

I'm wondering if there isn't a stabler means of printing than relying on
print media for something this complicated. I recall hearing @mbostock
https://github.com/mbostock talking about a project they built at NYT
that I believe used PhantomJS among other things to take browser snapshots
of each commit in a git repo. Maybe something similar can be done to make a
more stable solution? Spitballing here, but the current option seems fairly
unreliable.


Reply to this email directly or view it on GitHub
#808 (comment).

Nate, did you add ?print-pdf to que query string before printing out the
presentation?

Dmitry Pashkevich
On Jun 3, 2014 9:48 AM, "Nate Good" notifications@github.com wrote:

Printing the example "lab.hakim.se/reveal-js" presentation is broken for
me in current latest Chrome (Version 35.0.1916.114 beta), FireFox (29.0.1),
and Safari (Version 7.0.2 (9537.74.9)).

I see no styling at all. Just plain un-styled text. In some cases it is so
broken that I just get blank pages.

I'm wondering if there isn't a stabler means of printing than relying on
print media for something this complicated. I recall hearing @mbostock
https://github.com/mbostock talking about a project they built at NYT
that I believe used PhantomJS among other things to take browser snapshots
of each commit in a git repo. Maybe something similar can be done to make a
more stable solution? Spitballing here, but the current option seems fairly
unreliable.


Reply to this email directly or view it on GitHub
#808 (comment).

@mbostock

This comment has been minimized.

Show comment Hide comment
@mbostock

mbostock Jun 3, 2014

(FWIW, we don’t use PhantomJS; I wrote a Chrome extension which uses captureVisibleTab and produces higher-fidelity screenshots.)

mbostock commented Jun 3, 2014

(FWIW, we don’t use PhantomJS; I wrote a Chrome extension which uses captureVisibleTab and produces higher-fidelity screenshots.)

@nategood

This comment has been minimized.

Show comment Hide comment
@nategood

nategood Jun 3, 2014

Aha! Thanks Dmitry. Not sure how I missed that in the thread.

nategood commented Jun 3, 2014

Aha! Thanks Dmitry. Not sure how I missed that in the thread.

@willbuck willbuck referenced this issue in slara/generator-reveal Jul 30, 2014

Closed

Font issue #53

@jashmenn

This comment has been minimized.

Show comment Hide comment
@jashmenn

jashmenn Aug 4, 2014

@mbostock Is that extension open-source by chance? I'd love to try it out.

jashmenn commented Aug 4, 2014

@mbostock Is that extension open-source by chance? I'd love to try it out.

@mbostock

This comment has been minimized.

Show comment Hide comment
@mbostock

mbostock Aug 4, 2014

@jashmenn No, sorry; it’s tied to our workflow rather than generalized so it wouldn’t make sense to open-source. But it’s just a few lines of JavaScript to call captureVisibleTab and save the PNG to the downloads folder.

mbostock commented Aug 4, 2014

@jashmenn No, sorry; it’s tied to our workflow rather than generalized so it wouldn’t make sense to open-source. But it’s just a few lines of JavaScript to call captureVisibleTab and save the PNG to the downloads folder.

@Kabouik

This comment has been minimized.

Show comment Hide comment
@Kabouik

Kabouik Aug 28, 2014

Any comment on the idea of exporting a PDF page for every value of data-fragment-index? It would result in decomposing animations in distinct slides and thus solve issues like superimpositions and disappearance of fragments, and overall allow the PDF export to better mimick the HTML presentation. I don't know if this idea is being considered, I just suggested it a few months ago, but still face some issues when exporting my presentations in PDF with the current system so just asking again naively!

Kabouik commented Aug 28, 2014

Any comment on the idea of exporting a PDF page for every value of data-fragment-index? It would result in decomposing animations in distinct slides and thus solve issues like superimpositions and disappearance of fragments, and overall allow the PDF export to better mimick the HTML presentation. I don't know if this idea is being considered, I just suggested it a few months ago, but still face some issues when exporting my presentations in PDF with the current system so just asking again naively!

@nategood

This comment has been minimized.

Show comment Hide comment
@nategood

nategood Aug 28, 2014

@Kabouik The @mbostock extension is proprietary to the NY Times

Nate Good

http://nategood.com
@nategood

On Thu, Aug 28, 2014 at 10:06 AM, Kabouik notifications@github.com wrote:

I am sorry for the dumb question, but I can't seem to find this extension
@mbostock https://github.com/mbostock, could you please provide an URL
to try it out?

Still hoping @hakimel https://github.com/hakimel can think of a way to
export a PDF page for every value of data-fragment-index, which would
result in decompose animations in distinct slides and thus solve
superimposition/disappearance of fragments issue, and overall allow the PDF
export to better mimick the HTML presentation. I don't know if this idea is
being considered or not, I just suggested it a few months ago.


Reply to this email directly or view it on GitHub
#808 (comment).

@Kabouik The @mbostock extension is proprietary to the NY Times

Nate Good

http://nategood.com
@nategood

On Thu, Aug 28, 2014 at 10:06 AM, Kabouik notifications@github.com wrote:

I am sorry for the dumb question, but I can't seem to find this extension
@mbostock https://github.com/mbostock, could you please provide an URL
to try it out?

Still hoping @hakimel https://github.com/hakimel can think of a way to
export a PDF page for every value of data-fragment-index, which would
result in decompose animations in distinct slides and thus solve
superimposition/disappearance of fragments issue, and overall allow the PDF
export to better mimick the HTML presentation. I don't know if this idea is
being considered or not, I just suggested it a few months ago.


Reply to this email directly or view it on GitHub
#808 (comment).

enovajuan pushed a commit to enovajuan/reveal.js that referenced this issue Dec 2, 2014

@EoinTravers

This comment has been minimized.

Show comment Hide comment
@EoinTravers

EoinTravers Aug 3, 2015

I have a workaround for preserving fragments in your exported slides, tested on Ubuntu.
This requires two command line tools, scrot, for saving screen shots, and xdotool, for automating progress through your slide show.

First, create a version of your presentation with all animated transitions removed (it might be enough to add ?transition=none to your url). Then, create the following bash script, called screenshot.sh:

mkdir -p screenshots            # Creates it if missing

echo "Now open up your presentation and set it to fullscreen."
echo "You have 10 seconds."
t=10
while [ $t -gt 0 ]; do
      echo "$t..."
      sleep 1
      t=$(($t-1))
done

i=1000000
pause=1
while true; do
    scrot -d $pause "screenshots/shot$i.png"
    xdotool key space
    i=$(($i+1))
done

Open your presentation, set it to full screen mode, and finally open up a terminal, execute your script (sh screenshot.sh), and quickly full screen your presentation again, on the first slide. After 10 seconds, scrot will capture your screen every second (adjust pause to change this), and xdotool will simulate a press of the spacebar, advancing the slide.

Once your presentation is done, just switch back to the terminal and kill the script with Ctrl+C. The new screenshots/ folder will contain images of your presentation, which you can combine into a single PDF, for instance, using the imagemagick and pdftk tools.

for name in screenshots/*.png; do convert $name screenshots/`basename $name .png`.pdf; done
pdftk screenshots/*.pdf cat output Presentation.pdf

I have a workaround for preserving fragments in your exported slides, tested on Ubuntu.
This requires two command line tools, scrot, for saving screen shots, and xdotool, for automating progress through your slide show.

First, create a version of your presentation with all animated transitions removed (it might be enough to add ?transition=none to your url). Then, create the following bash script, called screenshot.sh:

mkdir -p screenshots            # Creates it if missing

echo "Now open up your presentation and set it to fullscreen."
echo "You have 10 seconds."
t=10
while [ $t -gt 0 ]; do
      echo "$t..."
      sleep 1
      t=$(($t-1))
done

i=1000000
pause=1
while true; do
    scrot -d $pause "screenshots/shot$i.png"
    xdotool key space
    i=$(($i+1))
done

Open your presentation, set it to full screen mode, and finally open up a terminal, execute your script (sh screenshot.sh), and quickly full screen your presentation again, on the first slide. After 10 seconds, scrot will capture your screen every second (adjust pause to change this), and xdotool will simulate a press of the spacebar, advancing the slide.

Once your presentation is done, just switch back to the terminal and kill the script with Ctrl+C. The new screenshots/ folder will contain images of your presentation, which you can combine into a single PDF, for instance, using the imagemagick and pdftk tools.

for name in screenshots/*.png; do convert $name screenshots/`basename $name .png`.pdf; done
pdftk screenshots/*.pdf cat output Presentation.pdf
@i3visio

This comment has been minimized.

Show comment Hide comment
@i3visio

i3visio Oct 14, 2015

That did the trick for us under Ubuntu with the dependencies already satisfied by doing:

sudo apt-get install scrot xdotool pdftk

Thanks a lot, EoinTravers. ;)

i3visio commented Oct 14, 2015

That did the trick for us under Ubuntu with the dependencies already satisfied by doing:

sudo apt-get install scrot xdotool pdftk

Thanks a lot, EoinTravers. ;)

jandot pushed a commit to vda-lab/vda-lab.github.io that referenced this issue Mar 30, 2016

@poonam6785

This comment has been minimized.

Show comment Hide comment
@poonam6785

poonam6785 May 26, 2016

I am facing same issue .few blank pages in my pdf .My file already having this code

<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>

but its showing blank pages in my pdf file.

poonam6785 commented May 26, 2016

I am facing same issue .few blank pages in my pdf .My file already having this code

<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>

but its showing blank pages in my pdf file.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment