Theme-aware PDF export

[Thurinum]

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:

Export to PDF in a theme other than the current theme

Use case or problem If you want to export in a specific theme (ex. a more professional one) you currently have to change your system theme and this is especially inconvenient if you’ve made a custom CSS that you’ll need to copy and paste in after you export. Proposed solution Provide a prompt after clicking export to pdf that lets you pick which theme you want it to export in. Current workaround (optional) Changing the system theme, exporting, then changing it back.

Also related, any feature request pertaining to HTML export.

[WhiteNoise]

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

[Thurinum]

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

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

[WhiteNoise]

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.

[Thurinum]

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

[WhiteNoise]

everything should be under @media print