Capture the component to PNG or Blob, then pass that image to your PDF library.
Copy-paste example
Install @zumer/snapdom, select the rendered element, and capture it:
const component = document.querySelector('#certificate')
const blob = await snapdom.toBlob(component, {
type: 'png',
dpr: 2,
embedFonts: true,
backgroundColor: '#ffffff',
})
// Pass blob to the PDF library used by your application.Why this pattern works
Image capture is useful for certificates, receipts or complex visual components where exact browser styling matters more than selectable PDF text.
Create an image ready for PDF
Generate a PNG Blob from this bounded certificate—the artifact a PDF library would receive.
DOM Capture Fundamentals
Awarded to SnapDOM Developer
Browser-rendered artifactLimits and common mistakes
The captured content becomes pixels. Accessibility, text selection, pagination and semantic document structure must come from a real HTML-to-PDF workflow instead.
Frequently asked questions
Does SnapDOM convert arbitrary HTML into a paginated PDF?
No. SnapDOM captures an element as an image; its PDF plugin creates an image-based single-page PDF.
When is image-based PDF appropriate?
For bounded visual artifacts such as certificates, tickets, receipts and shareable cards.
Capture it in the browser
Install SnapDOM and turn the DOM your users already see into a portable image.
Open the demoInstall from npm