Is it possible to export a dashboard to pdf

[MCRE-BE]

Description

Hi

I generated a dashboard using quarto as an HTML. Now I'm trying to see if I can get a pdf version of it.

I am trying to configure the .qmd as follows

---
title: "Daily KPI Tracking Dashboard"
format: 
    dashboard:
        theme: cosmo
        output-ext: pdf
        pdf-engine: weasyprint
logo: images/logo.svg
theme: custom.scss
---

It seems to run, but :

• setting weasyprint as pdf-engine does not seem to work as it always reverts to wkhtmltopdf
• I managed to get a pdf at a certain point, but without any styling. Most of the time, the PDF is simply broken.
• Using another html to pdf library does not seem to work with self-contained html as it cannot locate the css used (?)

thanks for the help and the awesome tool.

quarto render daily_dashboard.qmd --pdf-engine weasyprint

Executing 'daily_dashboard.quarto_ipynb'
  Cell 1/20: ''...Done
  Cell 2/20: ''...Done
  Cell 3/20: ''...Done
  Cell 4/20: ''...Done
  Cell 5/20: ''...Done
  Cell 6/20: ''...Done
  Cell 7/20: ''...Done
  Cell 8/20: ''...Done
  Cell 9/20: ''...Done
  Cell 10/20: ''...Done
  Cell 11/20: ''...Done
  Cell 12/20: ''...Done
  Cell 13/20: ''...Done
  Cell 14/20: ''...Done
  Cell 15/20: ''...Done
  Cell 16/20: ''...Done
  Cell 17/20: ''...Done
  Cell 18/20: ''...Done
  Cell 19/20: ''...Done
  Cell 20/20: ''...Done

pandoc --pdf-engine weasyprint
  to: html
  output-file: daily_dashboard.pdf
  template: >-
    C:\ProgramData\chocolatey\lib\quarto\tools\share\formats\dashboard\template.html
  standalone: true
  section-divs: true
  html-math-method: mathjax
  wrap: none
  default-image-extension: png
  pdf-engine: weasyprint

metadata
  document-css: false
  link-citations: true
  date-format: long
  lang: en
  page-layout: custom
  title: Daily KPI Tracking Dashboard
  logo: images/logo.svg
  theme: cosmo
  scrolling: false
  expandable: false

Fontconfig error: Cannot load default config file: No such file: (null)
Fontconfig error: Cannot load default config file: No such file: (null)
Fontconfig error: Cannot load default config file: No such file: (null)
WARNING: Ignored `gap: min(4vw, 1.5em)` at 4:28, invalid value.
WARNING: Ignored `overflow-x: auto` at 5:24, unknown property.
wkhtmltopdf not found. Please select a different --pdf-engine or install wkhtmltopdf

[mcanouil]

Use Decktape or any other tools like that.

[mcanouil]

That's not really the purpose of HTML Dashboards.

[MCRE-BE]

Yeah I figured that would be the case. The layouting was simply too easy to get a quick, 1 screen, report 😅
The dynamic layouting is terrific, but prevents simply printing it through Chrome.

[cscheid]

I'm a bit surprised that printing doesn't work well, though I don't expect that to have been something we tested.

I wonder if we can provide a CSS with appropriate print media queries for the dashboard format.

[mcanouil]

In case, it does not work great, in chromium based browser you have several capture commands such as the "Capture node screenshot" (very useful to target specific areas)

The four commands are accessible via the run commands in the developer mode:

[MCRE-BE]

To give an idea, this is what the dashboard looks like vs the pdf that is printed by Chrome.
I had to add some black boxes to hide data, but I could generate one with dummy data.
But :

• We lose some coloris information
• No way to keep everything on one single page
• The tables are all showing in HTML, but not in the printing.

Daily KPI Tracking Dashboard.pdf

[MCRE-BE]

In case, it does not work great, in chromium based browser you have several capture commands such as the node screenshot

The four commands are accessible via the run commands in the developer mode:

I didn't know those ! Nice !
I saw Decktape did add some options for screenshots of HMTL. Likely they use those. I'll give it a try.

[mcanouil]

FYI, the "capture node screenshot" is very useful to target areas in HTML documents.
Since it's using the viewport, you can very easily modify the height/width ratio, zoom in/out to easily achieve what you want.
From https://mine.quarto.pub/olympic-games-py/

Screen.Recording.2024-09-30.at.20.37.29.mov

Local node	global node

[MCRE-BE]

Works like a charm.
I just had to open the dev window as a separte window. Otherwise the dashboard resizes as the full screen is not available 🤣
But this is perfect atm. Now I need to find a way to automate it.

Thanks for the replies and spending the time !

[cderv]

FWIW we need to improve broad support for pdf-engine to work with HTML printer tools like weasyprint.
basically, using pdf-engine with format: html or similar is not working well. Epic issue is at

• [FR] Rethink the way to output PDF from any format.  #7039

There is linked to others in there.

So for now, it does not work well built-in unfortunately.

However, tools like this can be use on an HTML output. So I would go two steps for now:

• Render to HTML using quarto
• Then call weasyprint (or similar) on the output.

Hopefully, we'll be able to tackle improvement on this soon !

[MCRE-BE]

I wanted to share, in case someone stumbles upon this thread sometime.

For a good solutions, look above at ideas above:

• Decktape
• Capture Screenshot in developper tools for Chromium browsers (png output)

As alternative :

• I managed to fix the strange formatting by playing with the printing settings on Chrome :
  • By switching the paper size, the dashboard will resize automatically to fit the new paper size.
  • Be sure to enable "Background Graphics" to get all the colors and icons.
• f.e. my dashboard displays nicely on my 4K screen, but looks horrible printed with an A4 paper sheet. But with A2 as paper size and background graphics, it prints perfectly.

Might be an alternative for people not willing to add an additional dependency in their flow.
Might also be available as config in other printing libraries.

Anyway, thanks for all the support !