How-To Recipe

Export an invoice or report

Create a shareable snapshot of a printable browser component while preserving its exact CSS and fonts.

TL;DR

Capture the printable component with a white background and fixed DPR, then download PNG or JPEG.

Copy-paste example

Install @zumer/snapdom, select the rendered element, and capture it:

const invoice = document.querySelector('#invoice')
const capture = await snapdom(invoice, {
  backgroundColor: '#ffffff',
  embedFonts: true,
  dpr: 2,
  exclude: ['.invoice-actions'],
})
await capture.download({ format: 'png', filename: 'invoice-1042' })

Why this pattern works

A dedicated invoice wrapper keeps export dimensions and styling predictable. Hide editing and payment controls from the capture while leaving the live UI intact.

Export this invoice preview

The action controls stay outside the target, exactly as they should in a production invoice UI.

INVOICE #1042PAID

SnapDOM Labs · July 16, 2026

DOM capture integration$480.00

Performance audit$120.00

Total$600.00

The captured result will appear here.

Limits and common mistakes

SnapDOM produces an image snapshot. For selectable text, multiple pages, repeated headers or print pagination, use a dedicated HTML-to-PDF workflow instead.

Frequently asked questions

Can I create a PDF?

The pdfImage plugin can wrap a capture in a single-page image PDF. It is not a full paginated document engine.

Should invoices use JPEG?

PNG keeps text and fine rules crisp. JPEG can be smaller for photo-heavy reports but introduces compression artifacts.

Capture it in the browser

Install SnapDOM and turn the DOM your users already see into a portable image.

Open the demo Install from npm