Export a dashboard as an image
Capture the dashboard container, including its charts, HTML labels and surrounding card layout, and download a PNG.
Capture the dashboard container after charts and fonts finish rendering, then use download({ format: 'png' }).
Copy-paste example
Install @zumer/snapdom, select the rendered element, and capture it:
import { snapdom } from '@zumer/snapdom'
await document.fonts.ready
const dashboard = document.querySelector('#dashboard')
const capture = await snapdom(dashboard, { embedFonts: true })
await capture.download({ format: 'png', filename: 'dashboard', scale: 2 })Why this pattern works
Target the shared dashboard wrapper so headings, legends, KPI cards and HTML controls are included with the charts. Wait for asynchronous chart animation and data loading before capture.
Capture a live dashboard
This target combines HTML KPI cards, labels and CSS bars in one export.
Product health
Limits and common mistakes
Temporarily render virtualized or scroll-hidden content before capture if it must appear in the export. Exclude interactive controls with exclude when they should not be present in the final image.
Frequently asked questions
Can SnapDOM capture canvas-based charts?
Yes. Canvas elements are captured as part of the DOM snapshot, subject to normal cross-origin canvas security rules.
How do I hide export buttons?
Pass exclude: ['.export-controls'] or mark controls with data-capture="exclude".
Capture it in the browser
Install SnapDOM and turn the DOM your users already see into a portable image.
Open the demoInstallation