Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Export to PDF #50

Closed
kynan opened this issue Jul 18, 2013 · 66 comments
Closed

Export to PDF #50

kynan opened this issue Jul 18, 2013 · 66 comments

Comments

@kynan
Copy link

@kynan kynan commented Jul 18, 2013

Is there a "nice" way to export a Remark presentation as a PDF? By nice I mean 1) rendered like the screen output as closely as possible and 2) in vector format i.e. slides not rendered as raster images and concatenated.

It seems reveal.js has a PDF export via a print stylesheet, which unfortunately doesn't work on Linux.

@gnab
Copy link
Owner

@gnab gnab commented Jul 26, 2013

Currently there aren't, but it's definitely on the list of features that would be nice to have, via printing, like reveal.js does.

@Version2beta
Copy link

@Version2beta Version2beta commented Aug 13, 2013

Does this mean reveal.js doesn't work to print to PDF on Mac OSX? I too am receiving only the first page.

@kynan
Copy link
Author

@kynan kynan commented Aug 14, 2013

@Version2beta I think you should discuss that in the revelant reveal.js issues.

@craftgear
Copy link

@craftgear craftgear commented Aug 21, 2013

+1

And is there any workaround for the time being?

@gnab
Copy link
Owner

@gnab gnab commented Sep 24, 2013

The current version of remark now supports exporting the current, single slide to PDF via Chrome's print functionality. It's kind of useless as of right now, but export of all slides is on it's way.

@gnab
Copy link
Owner

@gnab gnab commented Oct 3, 2013

The last release 0.5.6 of remark now supports exporting to PDF via Chrome's print preview and Save to PDF option.

https://github.com/gnab/remark/releases/tag/v0.5.6

@gnab gnab closed this Oct 3, 2013
michaeljoseph added a commit to michaeljoseph/remarkable that referenced this issue Oct 6, 2014
michaeljoseph added a commit to michaeljoseph/remarkable that referenced this issue Oct 6, 2014
@MonsterSupreme
Copy link

@MonsterSupreme MonsterSupreme commented Oct 7, 2014

If I set the ratio to 4:3, and start to write and tune the slide content:
remark.create({ratio: "4:3"})
everything is OK, and exporting to PDF via Chrome is also correct.
However, if I set the ratio to 16:9, and start to write and tune the slide content:
remark.create({ratio: "4:3"})
everything still looks good, but exporting to PDF via Chrome will be a mess, especially when there are images inside.

@gnab
Copy link
Owner

@gnab gnab commented Oct 7, 2014

Printing has primarily been tested for a display ratio of 4:3. If this is of importance to you, please create a new issue regarding 16:9 support :)

@CatTail
Copy link

@CatTail CatTail commented Nov 6, 2014

Greate job! 👍

@danielstankiewicz
Copy link
Contributor

@danielstankiewicz danielstankiewicz commented Nov 19, 2014

Regression: export to PDF doesn't work in Chrome 39.0. Despite of using ratio of 4:3 slides do not fit to PDF page. Try on remarkjs.com site.

@kynan
Copy link
Author

@kynan kynan commented Nov 19, 2014

Regression confirmed on Chromium 38.0.2125.111 Built on Ubuntu 14.04, running on LinuxMint 17 (290379) (64-bit)

@laudenberg
Copy link

@laudenberg laudenberg commented Dec 17, 2014

@danielstankiewicz @kynan I "fixed" this by setting device resolution to 1024x768 in Chrome DevTools.

@kdabir
Copy link

@kdabir kdabir commented Jan 11, 2015

@laudenberg thanks for 1024x768 tip. without it the layout was coming out with wide left margin.

@freemancw
Copy link

@freemancw freemancw commented Jan 16, 2015

+1 for the 1024x768 tip!

@pitr-ch
Copy link

@pitr-ch pitr-ch commented Jan 17, 2015

thanks for the tip!

@Loreia
Copy link

@Loreia Loreia commented Feb 5, 2015

On my wide screen, I had to set 1024x576.
Thanks for the tip!!

@leonardinius
Copy link

@leonardinius leonardinius commented Feb 7, 2015

Just to confirm:

  • It works well on Latest chrome Version 40.0.2214.111 m - win7 - 64
  • Doesn't work on well on latest chromium (same box)
  • Doesn't work well in Yandex! Browser (on top of chrome)

BTW, shouldn;t the PDF export instruction be incorporated in Wiki?

@SR-G
Copy link

@SR-G SR-G commented Feb 27, 2015

Had to switch to 1024x594 now on my Chome 40.0.2214.115 m (Win7), but still works indeed (as i have some dark pages from time to time, i still had a black tiny border on the next page with 1024x576).

@leonardinius
Copy link

@leonardinius leonardinius commented Feb 27, 2015

@jeci-sarl
Copy link

@jeci-sarl jeci-sarl commented Mar 3, 2015

wkhtmltopdf works very well (http://wkhtmltopdf.org/)

sudo aptitude install wkhtmltopdf

wkhtmltopdf --page-width 111 --page-height 148  -O "Landscape"  gnab.github.io/remark remark.pdf

or without margin

wkhtmltopdf --page-width 111 --page-height 148 -B 0 -L 0 -R 0 -T 0 -O "Landscape"  gnab.github.io/remark remark.pdf
@leonardinius
Copy link

@leonardinius leonardinius commented Mar 3, 2015

@jeci-sarl It works, but for me it generates pdf with just one page insatead of 40, e.g. https://dl.dropboxusercontent.com/u/379506/out2.pdf

The command I used to generate it

wkhtmltoopd --page-width 111 --page-height 148 -B 0 -L 0 -R 0 -T 0 -O "Landscape" http://leonardinius.galeoconsulting.com/sweet-slides.rs/ out2.pdf

Edit

  • It does the same for gnab.github.io/remark in my case (single page)
  • If I instead of ubuntu default one, install the latest version from http://wkhtmltopdf.org/downloads.html page, it doesn't work completely.

It might it has something to do with my local setup.

@jeci-sarl
Copy link

@jeci-sarl jeci-sarl commented Mar 4, 2015

@leonardinius maybe it's due to version of wkhtmltopdf or QT, I'm on Debian 8 (QT 4.8.6).

$ wkhtmltopdf --version
wkhtmltopdf 0.12.1
@lexsys27
Copy link

@lexsys27 lexsys27 commented Apr 9, 2015

I try to export pdf slides using chrome. I set device resolution to 1024x594 but now I have three slides on single pdf page. What settings should I adjust so slides will fit the page?

@leonardinius
Copy link

@leonardinius leonardinius commented Apr 9, 2015

I don't recall the end result/solution (in the end it all worked fine
for me, except for text shadows), but I do distinctively remember I was
trying this in both Chrome/Chromium. Only one of those worked well for
me. Don't recall which one.

Hopefully it helps.

@lexsys27
Copy link

@lexsys27 lexsys27 commented Apr 9, 2015

wkhtmltopdf doesn't work for me too: remark.pdf contain only grey box

$ wkhtmltopdf --version
wkhtmltopdf 0.12.2.1 (with patched qt)
$ wkhtmltopdf --page-width 111 --page-height 148  -O "Landscape"  gnab.github.io/remark remark.pdf
@gerihu
Copy link

@gerihu gerihu commented Jun 12, 2016

mpusz's fix with a modified CSS worked perfectly for me in Chromium 50. I set 1024px 768px for 4:3 ratio. Thank you so much!

@pierrchen
Copy link

@pierrchen pierrchen commented Jul 22, 2016

I can confirm mpusz's way works amazingly well ! Thanks!

rberaldo added a commit to opensanca/projeto-gnu-fsf that referenced this issue Aug 13, 2016
@gshmu
Copy link

@gshmu gshmu commented Nov 8, 2016

can not print code. wkhtmltopdf 0.12.2.4
2016-11-08t18 18 46_001
2016-11-08t18 17 45_001

@pat-s
Copy link

@pat-s pat-s commented Jan 4, 2017

The easiest and most reliable way I have found to create pdfs is to install and use the
Window Resizer Extension

Then open the presentation in Chrome, use the extension to resize the window to 1024x768, and then print to pdf. This is the only way that worked reliably for me.

@cbrown1 worked best for me

@mmiladi
Copy link

@mmiladi mmiladi commented Jan 26, 2017

@gnab Thanks for the nice framework! It happens quite often for me to send the final presentation around. How about creating a wiki section about PDF export and mentioning the window size trick there?

@isameer
Copy link

@isameer isameer commented Feb 17, 2017

I found that trying to print worked correctly if I first hit 'C' to clone the presentation into a separate window and print from there. Otherwise, it would only print the first slide.

@sinedied
Copy link
Contributor

@sinedied sinedied commented Apr 9, 2017

Why not merge @mpusz fix into main source?

@page is standard and used by many other presentation libs, and would fix the issue for good.

@laudenberg
Copy link

@laudenberg laudenberg commented Jul 5, 2017

chrome --headless --disable-gpu --print-to-pdf=/tmp/example.pdf 'http://example.com' also looks promising. I am currently not aware of any command line options to get rid of the margins, although it should be possible via Chrome DevTools Protocol: https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-printToPDF

@eljefe6a
Copy link

@eljefe6a eljefe6a commented Jul 6, 2017

@laudenberg I started a discussion on Decktape about this. I think you're going to need a NodeJS script to do the actual save of the printToPDF because it returns a base64 encoded string. I won't be a complicated script because Remark already does the hard work of rendering out each slide as a page during print.

@MonsterSupreme
Copy link

@MonsterSupreme MonsterSupreme commented Jul 19, 2017

For me, I currently use the following settings:

<!DOCTYPE html>
<html>
<head>
    <title>IntelliJ IDEA</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" type="text/css" href="../remark.css">
</head>
<body>
    <textarea id="source">
    
    <!-- My ow content -->

    </textarea>
    <script type="text/javascript" src="../remark-latest-min.js"></script>
    <script type="text/javascript">
        var slideshow = remark.create({
            ratio: '4:3'
        });
    </script>
</body>
</html>

And then in Chrome (this only works in Chrome), from the Developer Tools menu, toggle the Device Toolbar (the second icon from the left) to use its Responsive Web Design simulation capability:

intellij idea 2017-07-19 10-22-46

Define an 800x600 device, print from it, and then you will get an almost perfect PDF output.

intellij idea 2017-07-19 10-14-18

@cpina
Copy link

@cpina cpina commented Jul 27, 2017

I have a presentation with some dark background so I wanted to cut it correctly to the pixel.

The solution was:

  1. pdfcrop --verbose presentation.pdf : then checking the standard output I saw the bounding box of a dark slide which I used as a reference (in my case "79 211 535 554")
  2. Then pdfcrop --bbox "79 211 535 554" non-cropped-presentation.pdf presentation.pdf
@ekstroem
Copy link

@ekstroem ekstroem commented Aug 8, 2017

Trying to make a general fix for @mpusz solution above. Which javascript variable contains the actual (final) dimensions of the presentation. referenceWidth in scalar.js is the reference - is there a variable that contains the actual value after the ratio is changed? Or is it easily extractable?

@yihui
Copy link

@yihui yihui commented Aug 9, 2017

Following @mpusz's suggestion above, I prepared a short JS function to set the page size dynamically, so that you don't need to worry about the aspect ratio:

(function() {
  var d = document, s = d.createElement("style"), r = d.querySelector(".remark-slide-scaler");
  if (!r) return;
  s.type = "text/css";
  s.innerHTML = "@page { size: " + r.style.width + " " + r.style.height +"; }";
  d.head.appendChild(s);
})();
@eljefe6a
Copy link

@eljefe6a eljefe6a commented Aug 9, 2017

Chrome just started supporting headless mode. I created a Node.js script that uses the headless interface and writes out the PDF. I've tested it with Chrome 60 and it works well.

@kevinsimper
Copy link

@kevinsimper kevinsimper commented Sep 6, 2017

If you want a squared presentation, you should change the page to this:

@page {
  size: 1024px 768px;
  margin: 0;
}

@media print {
  .remark-slide-scaler {
    width: 100% !important;
    height: 100% !important;
    transform: scale(1) !important;
    top: 0 !important;
    left: 0 !important;
  }
}
@siso
Copy link

@siso siso commented Jan 21, 2019

astefanutti/decktape worked like a charm for me:

$ docker run --rm -t -v `pwd`:/slides -v `pwd`:/home/user astefanutti/decktape /home/user/slides.html slides.pdf

Kudos to @astefanutti 🙇

@MilovanTomasevic
Copy link

@MilovanTomasevic MilovanTomasevic commented Apr 12, 2019

When I add an effect to css

.remark-slide-container {
    transition: opacity 1s linear, right 1s ease-in-out;
    opacity: 0;
    right: 1000px;
}
.remark-visible {
    transition: opacity 1s linear, right 1s ease-in-out;
    opacity: 1;
    right: 0px;
}
.remark-fading {
    z-index: 9;
}
.remark-visible ~ .remark-slide-container {
    right: -1000px;
}

Then only the current page shows me on the print, all the others are empty - white.

I actually need to print the initial setup (because these effects make me a problem in print), does anyone know how to solve this problem?

slides

Well yes, and to mention, the docker generates slides without error :)

Tnx

@yihui
Copy link

@yihui yihui commented Apr 12, 2019

@MilovanTomasevic I think you need to reset opacity for print media (i.e. define CSS separately for @media screen). See more about CSS media queries: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

@sinedied
Copy link
Contributor

@sinedied sinedied commented Apr 12, 2019

Yes, also removing the CSS animation for print media query works better 😉

@josephernest
Copy link

@josephernest josephernest commented Apr 3, 2020

@lexsys27 I have the same problem (wkhtmltopdf 0.12.5 (with patched qt)):

wkhtmltopdf --page-width 111 --page-height 148  -O "Landscape"  gnab.github.io/remark remark.pdf

gives a single page grey box.

As of today (2020), what is the solution to make wkhtmltopdf work with remark? (I don't want to use decktape: installation failed for other reasons on my system)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.