SnapDOM PDF vs html2canvas + jsPDF: searchable invoices from HTML

What the PDF contains

For an invoice, check the layout, whether the text can be selected and whether payment links work. The three export routes below handle those requirements differently.

SnapDOM plugins 4.0.0 adds the MIT-licensed PDF exporter to the official plugin package. It works with SnapDOM 3.x. Its visible page is the captured image; an invisible PDF text layer adds selection and search. The visible content remains a raster image.

SnapDOM PDF vs html2canvas + jsPDF vs jsPDF

SnapDOM + PDF plugin: capture the invoice you already have

The PDF looks like the HTML invoice. The plugin also adds a text layer, so the recipient can search the invoice number and copy text. Links can remain clickable.

Use this when your app already displays the document you want to export. The visible page is still an image, so zooming in does not turn it into vector artwork.

html2canvas + jsPDF: put a screenshot inside a PDF

html2canvas turns the HTML into an image. jsPDF puts that image on a PDF page. In this recipe, the invoice text is part of the image: the recipient cannot select or search it.

Use this when an image inside a PDF is enough. Adding selectable text or clickable links requires more code.

jsPDF directly: build a separate PDF layout

You write the text and draw the document with jsPDF’s APIs. The text is selectable, and you can add links. You also choose the positions, fonts and page breaks yourself.

Use this when the PDF should have its own layout. It does not automatically copy the appearance of your HTML invoice.

jsPDF can write text, graphics and links directly, and its separate html() API depends on html2canvas. The table and demo compare the common addImage() recipe with programmatic jsPDF; the comparison covers those export routes. See the jsPDF README and HTML API reference.

html2canvas implements a documented subset of CSS rather than asking the browser for a native screenshot. Its feature list currently marks box-shadow and filter unsupported. Check the exported invoice against the source, especially if it uses those styles.

Try the same invoice three ways

Change the client name below, generate each PDF, and search for that name in the files. Compare selection, link behavior and the visible header. The programmatic jsPDF version uses the same invoice data with its own layout.

For a larger acceptance test, open the PDF playground, select A4 ledger, and check row breaks and repeated table headers. Use the multilingual and form examples to check text in other scripts and editable fields.

Install and export

npm install @zumer/snapdom@3 @zumer/snapdom-plugins@4

import { snapdom } from '@zumer/snapdom';
import { pdf } from '@zumer/snapdom-plugins/pdf';
await document.fonts.ready;
const invoice = document.querySelector('#invoice');
const result = await snapdom(invoice, { plugins: [pdf()] });
const blob = await result.toPdf({ page: 'a4', margin: 36 });
// Upload the Blob, or opt into a download:
await result.toPdf({ page: 'a4', download: 'invoice.pdf' });

Wait for the application's data and images as well as fonts. Put capture options on snapdom() or the plugin factory, and paper options on toPdf(). For output options, see the PDF reference.

Document checks before shipping

Search for a unique invoice identifier; copy a full line item; click a known link; inspect page two; and open the file in the viewer your recipients use. The exporter supports pagination and repeated table headers, but a row taller than a page still has to split. Tagged output by itself does not establish PDF/UA conformance.

Remove sensitive source content before capture. A painted rectangle can hide pixels while leaving searchable text underneath. Keep the downloadable document and the browser preview under the same redaction policy.

Choose programmatic jsPDF when the report should have a dedicated print layout and you can maintain it. Choose the image recipe when bitmap output meets the requirements. Choose SnapDOM PDF when preserving the existing component and adding document behavior is the priority.

Continue with the capture pipeline

Start with choosing the capture element, then read capture options and cache and recapture behavior. For editable SVG and Figma output, read the Vector and Figma workflow.

Sources checked October 5, 2026: published plugins 4.0.0, PDF implementation and reference, html2canvas architecture, and the jsPDF references above.