GitHub user FrancescoCastaldi added a comment to the discussion: Superset
download image and pdf issue
The squashed image output (width 1918px with small height) happens because
client-side export handles DOM rendering differently from on-screen display.
### Why Client-Side Export Shrinks or Distorts
When you click **Download as Image** or **Download as PDF** from the dashboard
menu:
1. Superset executes client-side rasterization in the user's browser using
`dom-to-image` (for PNG) and `html2canvas` (for PDF).
2. The export utility (`downloadAsImage.tsx`) clones the `.dashboard` DOM tree
and evaluates computed heights of the top-level grid containers.
3. If charts are placed inside rows with fixed CSS heights, flex containers
without explicit min-height, or components with `overflow: hidden` / `overflow:
auto`, `dom-to-image` captures only the visible client bounding box instead of
the full scrollable canvas, resulting in horizontal squashing or cropped
headers.
### Steps to Fix the Squashed Output
1. **Dashboard Grid Container Sizing:**
In the dashboard edit mode, check the row and column containers holding the
chart. If the chart is nested inside a container where height was manually
constricted, expand the row height so that the chart tile has natural clearance
without relying on inner container scrollbars.
2. **Remove Overflow and Transform Constraints in Custom CSS:**
If you have applied custom CSS in the dashboard settings, avoid rules like:
```css
/* Avoid these on dashboard chart containers */
.dashboard-component-chart-holder {
overflow: hidden !important;
max-height: 350px !important;
}
```
Instead, let the chart component compute its dimensions:
```css
.dashboard-component-chart-holder {
overflow: visible !important;
}
```
3. **High-Fidelity Server-Side Alternative:**
If you require exact pixel-perfect exports that match the live dashboard with
full SVG charts, gradients, and custom CSS:
Enable Celery Alerts and Reports with headless Chrome / Playwright
(`FEATURE_FLAGS = {"ALERT_REPORTS": True}`). Server-side exports launch a
headless browser with full window dimensions (`WEBDRIVER_WINDOW_SIZE = (1920,
1080)` in `superset_config.py`), taking genuine viewport screenshots that
preserve all visual styles.
GitHub link:
https://github.com/apache/superset/discussions/45443#discussioncomment-19164447
----
This is an automatically sent email for [email protected].
To unsubscribe, please send an email to:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
