Theme-aware PDF export

Use case or problem

While it is possible to export a note in PDF, the export does not take in account the UI theme currently in use (i.e. the Preview’s CSS).

However, such a feature would be easy to implement and extremely useful for producing good-looking and professional documents within minutes.

Proposed solution

The following article suggest a way of generating a PDF using two JS libs:

Mellul, D. (August 2, 2020). Javascript : Convert HTML + CSS to PDF. Print HTML in Seconds. Medium. https://itnext.io/javascript-convert-html-css-to-pdf-print-supported-very-sharp-and-not-blurry-c5ffe441eb5e

In sum, the process is the following:

  1. Convert the preview’s root HTML node into a canvas.
    At a quick glance, this would be .view-content.
  2. Convert the obtained HTML into a PDF.

This method produces a rasterized (image) PDF.
While this doesn’t allow for text selection, it is sufficient for most uses.

My suggestion is to implement this feature alongside the existing PDF export, thereby providing two export functions, something like:

“Export Markdown to PDF” // Existing export function
“Export Preview to PDF” // Through JSpdf

Related feature requests (optional)

This is somewhat related:

Also related, any feature request pertaining to HTML export.

2 Likes

The current export is theme-dependant. It’s up to the there-author to style the pdf

@WhiteNoise Does this work with dark themes? I’ve tried with the following community themes but to no avail:

Screenshot_20210208_091705

Here is a sample document:


And here is the resulting PDF:

While the text is just right, the background is not taken into account. Is this just not supported or am I doing something wrong?

Running Obsidian 0.10.11 on Linux.

Thur

you are not doing anything wront. It possible for theme authors to style the PDF, maybe they have not done it, but they can do it.

1 Like

All right, thank you! Will look into it.

@WhiteNoise Edit: Do you know by any chance the name of the CSS property used for setting the PDF background? I couldn’t find it.

Thur

everything should be under @media print

3 Likes