🏠 back to Observable

Saving Document as PDF

I can see that there is functionality for exporting individual cells as SVG or PNG, but I have a use case where I’d like to print an entire notebook as a PDF. It has no code, only images and markdown text.

Specifically, I’ve prepared lecture notes using the template here, but now I’m getting requests for PDF versions of the slides, so that they can be read offline. Printing from a browser is splitting images across pages.

Is there some functionality that I’m not aware of / has anyone found a workaround?


The simplest way would be to save the document as PDF, e.g. via the print dialog. Some observations:

  • The notebook iframe cannot trigger a print dialog:

    Ignored call to 'print()'. The document is sandboxed, and the 'allow-modals' keyword is not set.

  • The parent window cannot trigger a print dialog on the iframe:
    > frames[0].print()
    VM5624:1 Uncaught DOMException: Blocked a frame with origin "https://observablehq.com" from accessing a cross-origin frame.
  • page-break-* declarations inside the iframe have no effect.

I have a hard time imagining how printing (or a conversion via the parent window) could work under these conditions. My recommendation would be to instead generate a PDF on the fly for download, e.g. via html2pdf.

If you provide a link to your notebook maybe I (or others) will be able to give some pointers.

That’s a good idea about a link, here is one example: https://observablehq.com/@krisrs1128/introduction-to-inference

The biggest problem the students have described is the page breaks. I’ll check out html2pdf and report back on whether this works.

1 Like