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

Print to PDF #127

Closed
luctrudeau opened this issue Jul 12, 2015 · 55 comments
Closed

Print to PDF #127

luctrudeau opened this issue Jul 12, 2015 · 55 comments

Comments

@luctrudeau
Copy link

Reveal.js supports the following option :

Open your presentation with print-pdf included anywhere in the query string. This triggers the default index HTML to load the PDF print stylesheet (css/print/pdf.css). You can test this with lab.hakim.se/reveal-js?print-pdf.

ref: https://github.com/hakimel/reveal.js/

I tried adding ?print-pdf to my ipnb url but it does not work.

I was wondering if it was possible to enable it with RISE. This way I can make handouts for students.

@damianavila
Copy link
Owner

It should be possible, and it fact, it should work... I will try to investigate soon.

@bs1234
Copy link

bs1234 commented Nov 6, 2015

I am also interested in this

What is the easiest way to print to pdf for slides created via RISE?

I try the following: jupyter ipnyb -> slides (via rise) -> print to pdf (using chrome print options)

However, result is: only the currently active slide is printed

Any advice for simplest way to convert slides to pdf?

@damianavila
Copy link
Owner

Any advice for simplest way to convert slides to pdf?

Probably using nbconvert and then print-pdf as stated here: https://github.com/hakimel/reveal.js#pdf-export, BUT I did not checked it lately... and usaually pdf exportation for reveal have problems (not sure if it is stable now, I have to check).

@aaronbarzilai
Copy link

Damian,

I'd love to make this work too. I tried to use your instructions above but I'm not sure I'm following. What are the steps needed if I have a notebook on my windows box at "C:\MyDir\MyNotebook.ipynb"?

@aaronbarzilai
Copy link

I managed to figure it out after more testing, thought I'd leave the instructions here:

  1. Generate the slides and serve them using nbconvert:
    jupyter nbconvert --to slides "C:\MyDir\MyNotebook.ipynb" --post serve
  2. It opens up a webpage for me in my browser at:
    http://127.0.0.1:8000/MyNotebook.slides.html#/
  3. Add print-pdf to the querystring as
    http://127.0.0.1:8000/MyNotebook.slides.html?print-pdf
    (Note My error was leaving in the #/)
  4. The page then renders the slides vertically.
  5. Save to PDF in Chrome using the print option (e.g. Ctrl-P)

@damianavila
Copy link
Owner

Thanks for the detailed step @aaronbarzilai
Can you tell me which Chrome version are you using?
Are the pdf respecting correctly the slide limits?

@bs1234
Copy link

bs1234 commented Nov 24, 2015

@aaronbarzilai thank you, thank you!.

Im still struggling with this. I get the error below when i try to follow your steps, is there something obvious I should check or configure (im not familiar with nbconvert)

OSError: [WinError 10048] Only one usage of each socket address (protocol/networ
k address/port) is normally permitted

@aaronbarzilai
Copy link

Version 46.0.2490.86 m
I'm on Windows 7 still.

As far as I can tell it is respecting the slide limits, but I'm just
getting started with RISE so I am not sure I've fully explored that.

Thanks,
Aaron

On Tue, Nov 24, 2015 at 2:32 PM, Damián Avila notifications@github.com
wrote:

Thanks for the detailed step @aaronbarzilai
https://github.com/aaronbarzilai
Can you tell me which Chrome version are you using?
Are the pdf respecting correctly the slide limits?


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

@bs1234
Copy link

bs1234 commented Nov 24, 2015

I was receiving this error: "[WinError 10048] Only one usage of each socket address (protocol/network address/port) is normally permitted"
And it turns out the default IP and port 127.0.0.1:8000 were already being used by something else.

So, inspired by this issue, jupyter/nbconvert#102 (comment)
I changed the default IP address in serve.py from 127.0.0.1 to 127.0.0.2.

Now I do see the webpage in the browser (hooray!) but still have several issues (boo)

  1. Any images that had relative file paths are now not found
  2. Adding "?print-pdf" doesn't appear to do anything.
  3. Printing or saving to PDF does not respect the slide breaks

I also see several of these types of errors in the console:
ERROR:tornado.access:500 GET /reveal.js/js/reveal.js (127.0.0.1) 20006.00ms
ERROR:tornado.access:500 GET /reveal.js/lib/js/head.min.js (127.0.0.1) 20005.00m
ERROR:tornado.application:Uncaught exception GET /reveal.js/js/reveal.js (127.0.0.1)

My questions:

  1. was changing serve.py to 127.0.0.2 a good thing to do?
  2. Do i need to change that IP address elsewhere because of the tornado errors?

Any advice gratefully received to learn how to print to PDF.

@anaderi
Copy link

anaderi commented Dec 5, 2015

my workflow:

  • ipython nbconvert --to slides Analysis-scheme1.ipynb --reveal-prefix https://cdn.jsdelivr.net/reveal.js/2.6.2
  • python -m SimpleHTTPServer 8080
  • go to URL http://server:8080/Analysis-scheme1.slides.html?print-pdf with Chrome-based browser
  • Cmd-P
    and it renders all slides as separate pages in needed page orientation. Although
    • the headings looks quite different from what I see if I just press 'RISE slideshow' button and
    • (the most annoying part) I don't see slide numbers on those pages.

Are there any ideas how can those two can be fixed?

EDIT: of course it would be nicer if one could just append '?print-pdf' to the URL generated as one presses 'livereveal' slideshow button in jupyter toolbar.

@bs1234
Copy link

bs1234 commented Dec 7, 2015

@anaderi thank you, thank you!
This was super helpful for me so adding a few comments for anyone else trying this:

My workflow (with Anaconda 3.4):

  • cd to the directory containing my_notebook.ipynb
  • ipython nbconvert --to slides my_notebook.ipynb --reveal-prefix https://cdn.jsdelivr.net/reveal.js/2.6.2
  • open the file that was created in current directory: my_notebook.slides.html
  • append "?print-pdf" to end of URL

Then chrome can print PDF of all slides as they appear in HTML slides.
This is the catch, because the slides created this way are different to those created with RISE.
I see scroll bars around some titles.
As well as the scroll bars around dataframes & charts (created with Bokeh) that I see with RISE
However, images are correctly scaled, so never have scroll bars.

My questions for anyone more knowledgeable:

  1. How to use nbconvert but force all dataframes, titles, and charts (Bokeh) to be scaled to fit on page (so no scroll bars)
  2. How to add page numbers to each slide
  3. How to increase page width

Apologies if these are basic questions
thanks in advance,

@anaderi
Copy link

anaderi commented Feb 14, 2016

(a couple of months later) @damianavila, do you think there are any chance this one would be resolved soon?

@damianavila
Copy link
Owner

You mean print-pdf from the slideshow view?

Regrettably, currently, I almost don't have time to make it work... but it is in my top priority to check this again when I have some time available...

@anaderi
Copy link

anaderi commented Jul 10, 2016

maybe summer will promise a glimpse of a free time for this issue? )

@damianavila
Copy link
Owner

maybe summer will promise a glimpse of a free time for this issue? )

Maybe... 😉

@anaderi
Copy link

anaderi commented Jul 12, 2016

meanwhile ... I've managed to merry RISE with decktape. works reasonably well.
astefanutti/decktape#57

@damianavila
Copy link
Owner

That's great to know... Printing PDF from HTML slides was always a nightmare... I am happy to instruct people to use other packages if the resulting pdf quality is something reasonable.
Do you have any output to take a look?

@anaderi
Copy link

anaderi commented Jul 12, 2016

I have a private example (research I'm not allowed to share). If you give me link to a RISE-enabled notebook with reasonable dependencies , I'll send you the link to the slides decktape produces )

@damianavila
Copy link
Owner

If you give me link to a RISE-enabled notebook with reasonable dependencies , I'll send you the link to the slides decktape produces )

OK, I will do that... and post the link here and I will ping you...

@anaderi
Copy link

anaderi commented Jul 18, 2016

JFYI, the PR has been accepted and it is part of decktape now.

@damianavila
Copy link
Owner

Thanks for the ping @anaderi

@shortcipher3
Copy link

@anaderi I tried your decktape solution, looks very promising, but I get a ReferenceError that phantomjs can't find variable Reveal. Did I miss a step in the setup?

./bin/phantomjs.exe decktape.js rise http://localhost:8888/notebooks/test_slides.ipynb#/slide-0-0 test2.pdf
Loading page http://localhost:8888/notebooks/test_slides.ipynb#/slide-0-0 ...
Default extension for cell metadata editing loaded.
Raw Cell Format toolbar preset loaded.
Slideshow extension for metadata editing loaded.
actions jupyter-notebook:find-and-replace does not exist, still binding it in case it will be defined later...
Loading page finished with status: success
load_extensions [object Arguments]
RISE DeckTape plugin activated
Loading extension: jupyter-js-widgets/extension
Loading extension: livereveal/main
Session: kernel_created (2a77b57a-5ff9-4aaa-8f4d-80c760a6042e)
Starting WebSockets: ws://localhost:8888/api/kernels/2a1253bd-e789-4417-acf2-f8d30ddd21f9
+- ReferenceError: Can't find variable: Reveal
|_ phantomjs://webpage.evaluate(): 2
|_ phantomjs://webpage.evaluate(): 9
+- ReferenceError: Can't find variable: Reveal
|_ phantomjs://webpage.evaluate(): 5
|_ phantomjs://webpage.evaluate(): 6
Kernel: kernel_connected (2a1253bd-e789-4417-acf2-f8d30ddd21f9)
loaded widgets
Kernel: kernel_ready (2a1253bd-e789-4417-acf2-f8d30ddd21f9)
Widget backend and frontend versions are compatible
+- ReferenceError: Can't find variable: Reveal
|_ phantomjs://webpage.evaluate(): 2
|_ phantomjs://webpage.evaluate(): 8
TypeError: null is not an object (evaluating 'index.length')

@ssanderson
Copy link
Contributor

I hit the same issue as @shortcipher3 this morning as well.

@astefanutti
Copy link

@shortcipher3 @ssanderson would that be possible for you to increase the delay here: https://github.com/astefanutti/decktape/blob/18d1e1537fe85c7d5cd9cdaa4f46184eda7241b0/plugins/rise.js#L36 and give it a try? It may be that it takes a bit more time for Reveal.js to initialise depending on your setup.

@schlichtanders
Copy link
Contributor

schlichtanders commented Mar 24, 2017

So I was able to do render it. For others who also found this issue like me, wanting to render a pdf, here is what I did:

  1. git clone https://github.com/astefanutti/decktape
  2. download decktape's forked version of phantomjs (see https://github.com/astefanutti/decktape)
    # Windows (MSVC 2013), for Windows Vista or later, bundles VC++ Runtime 2013
    $ curl -L https://github.com/astefanutti/decktape/releases/download/v1.0.0/phantomjs-msvc2013-x86.exe -o phantomjs.exe
    # Mac OS X (Cocoa), 64-bit, for OS X 10.6 or later
    $ curl -L https://github.com/astefanutti/decktape/releases/download/v1.0.0/phantomjs-osx-cocoa-x86-64 -o phantomjs
    # Linux (static build), 64-bit, requires fontconfig (CentOS) or libfontconfig (Debian, Ubuntu)
    $ curl -L https://github.com/astefanutti/decktape/releases/download/v1.0.0/phantomjs-linux-x86-64 -o phantomjs
    
  3. put phantomjs on your PATH
  4. start jupyter-notebook server
    [you don't have to start the rise presentation, you even don't have to open any notebook at all I think]
  5. cd decktape
  6. within decktape's cloned repository run the decktape.js file like phantomjs decktape.js rise <Jupyter-Notebook-URL> <Output-File>.
    More concretely it looks something like the following:
    $ phantomjs decktape.js rise http://localhost:8888/notebooks/your/notebook.ipynb?token=5413981230123YourIndividualJupyterNotebookSessionToken412417923   /path/to/outputfile.pdf
    
    Note that the jupyter-notebook session token which seems needed for more recent jupyter-notebook versions. The token is shown to you when you start the jupter-notebook server from commandline.

Possible Problems:

  • If I run decktape.js with wrong token first, or some other things first, it appeared to me that even if I correctly entered everything afterwards, it still failed.
    Restarting the jupyter-notebook server helped
  • In between I had the impression that things didn't worked when using chrome as the default browser (compared to firefox), however in the end I was able to generate the .pdf also using chrome as default too. Probably this impression was only an accident by confusing something else.
  • if you have changed the default presentation size/width/height using the notebook metadata, you might have to adapt the call to include the -s <width>x<height> parameter.
    E.g. phantomjs decktape.js rise -s 1500x900 https://localhost:8888/...
  • if you experience issues when rendering svg files, please post your fix here SVG text is extremely tiny  astefanutti/decktape#90
  • [EDIT - added] math rendering problems: just try to rerender, it did different things in my case if I just immediately rerun and sometimes the output was kind of ok. I posted the issue here MathJax rendering is indeterministic astefanutti/decktape#91

Enjoy!

@schlichtanders
Copy link
Contributor

One problem I experienced which is worth mentioning separately is that the fragments don't show up at all.

The current decktape rise plugin puts fragments: false, see https://github.com/astefanutti/decktape/blob/master/plugins/rise.js#L40 which should render everything together I think. Unfortunately this is not the case for, but I see only each initial slide without any fragments.

Work Around:

When changing the above line to fragments: true, every fragment is rendered as a single slide which is a very efficient work around for the moment as you can simply delete the unwanted slides afterwards. At least using this method you have everything in the pdf output.

@damianavila
Copy link
Owner

Thanks for all this info @schlichtanders

@ckirches
Copy link

ckirches commented Apr 3, 2017

I'm getting the same "ReferenceError: Can't find variable: Reveal" and am stuck. How did everyone get this to work? What might I be doing wrong?

@abhisheietk
Copy link

abhisheietk commented Apr 18, 2017

Have you added token information in the url. as suggested by @schlichtanders

@thallada
Copy link

thallada commented Jun 9, 2017

Maybe there's a way to use Headless Chrome to visit each slide, print to pdf (using the --print-to-pdf flag), and then combine all the pdfs into one at the end?

@damianavila
Copy link
Owner

Maybe there's a way to use Headless Chrome to visit each slide, print to pdf

It could be probably a nice idea to test.

@lucasdurand
Copy link

Not sure if this has been addressed, but I've been struggling to get colours in custom.css to display when printing to pdf. It turns out the twitter bootstrap styles are dropping in print CSS that sets a bunch of things with !important, so it's necessary to flag as !important anything you're putting into custom.css

@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
... }

@damianavila
Copy link
Owner

Thanks for the note @lucasdurand (this is probably something to fix upstream, in the notebook css itself).

@lucasdurand
Copy link

lucasdurand commented Jun 14, 2017

You're absolutely right @damianavila. It's actually set in the notebook css file. Somewhere around here:
...Anaconda2\Lib\site-packages\notebook\static\style\style.min.css
and
...Lib\site-packages\nbconvert\resources

@astefanutti
Copy link

@thallada, @schlichtanders, all, DeckTape 2.x now uses headless Chrome and has been updated to support RISE 5.x.

@damianavila
Copy link
Owner

Thanks for the info @astefanutti!

@jbednar
Copy link

jbednar commented Nov 9, 2017

Hi @damianavila, is there now a section in the docs explaining how to print to PDF like this? I tried installing DeckTape, but wasn't able to get it working, and it would be great to see a step by step example of doing so. I love RISE, but I also need to be able to share a PDF with people after the talk...

@damianavila
Copy link
Owner

There is not any reference in the docs about this.
We should try

  1. validate what @schlichtanders posted above
  2. try the reveal.js documented approach
  3. convert using nbconvert and then to pdf using 2

Those are the alternatives, but we need to validate all of them.
I will try to take a look on this during the weekend and see if I can get a reasonable pdf.

@lucasdurand
Copy link

I have been using 3 for a few months now successfully. It produces reasonable PDFs as long as you restrict the amount of information on a slide, much less forgiving than the "live slides" view with Reveal.

@astrojuanlu
Copy link

I just used @aaronbarzilai method #127 (comment) (see https://twitter.com/astrojuanlu/status/912178600916353024) but the syntax highlighting doesn't work. Does it happen to anyone else? Is there a quick workaround? If not, I will try DeckTape.

@astrojuanlu
Copy link

(note: adding !important to the relevant styles fixed the issue, so it's probably a similar problem than this one #127 (comment) by @lucasdurand)

@damianavila
Copy link
Owner

Howdy all, the print issue was solved in notebook master (jupyter/notebook#3212). We should see fix in our land soon (as soon as we have a new notebook release).

@astrojuanlu
Copy link

I tried this with notebook 5.4.0, which should contain the fix, and all the code is still black. But I guess this is not a problem in RISE...

@damianavila
Copy link
Owner

This needs to be propagated to the CDN from where nbconvert is fetching the css: jupyter/nbconvert#747.

@damianavila
Copy link
Owner

@lucasdurand @schlichtanders I have written your recommendations in the docs, thanks for testing those options and share them.

@schlichtanders
Copy link
Contributor

thank you too!

@lucasdurand
Copy link

Cheers! This was a wild ride

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

No branches or pull requests