Rendering Modes

Canvas mode

Canvas mode is the default and uses the package's existing html2pdf.js / html2canvas / jsPDF pipeline.

<Html2Pdf render-mode="canvas" manual-pagination />

Use it when the highest possible browser CSS fidelity is more important than selectable body text.

In v1.3.0, Canvas keeps inline SVG in its export staging by default, but the final PDF page is still a raster image. Chart canvases are snapshotted on the private export clone before capture. See fonts, charts, SVG and images.

Best for:

• complex CSS
• gradients
• shadows
• transforms
• custom web fonts
• visual dashboards
• designs where browser appearance is the priority

Body content is rasterized, so normal body text is not selectable/searchable.

A viewer such as Chrome may apply OCR and let users select apparent text in an image-only PDF. A foreground text watermark or some numbering paths can also add native text over a Canvas body. Inspect PDF text operators or extract text with a PDF tool to distinguish native text from viewer OCR.

Incremental Canvas rendering

When the export DOM contains .html2pdf__page-break markers, Canvas mode uses an incremental page-by-page renderer instead of capturing the entire document as one giant canvas.

This path:

• clones and renders one logical PDF page at a time
• keeps raster dimensions page-bounded
• releases temporary page DOM after html2canvas finishes reading it
• releases canvas backing stores after insertion into jsPDF
• reports page-level progress
• yields to the browser between expensive steps
• supports cooperative cancellation before the next page begins

Canvas documents without page-break markers keep the legacy html2pdf.js worker for backwards compatibility.

Oversized splittable Canvas sections are measured and re-paginated on private staging DOM before capture. Reused fitting fragments and page-by-page capture reduce repeated work; very large indivisible media can still scale or split. Vue header/footer slots use image captures in Canvas mode and supported text/shape operations in text mode.

Selectable text mode

<Html2Pdf render-mode="text" manual-pagination />

Selectable text mode converts the live browser layout into PDF vector/text operations instead of turning the entire document into a screenshot.

For v1.3.0, inline SVG shapes are rasterized in this mode; svgMode="preserve" cannot turn them into native PDF vectors. Optional TTF or TrueType-outline OTF registration can embed a matching face for real PDF text. Without a registered font, unrecognized CSS families use built-in PDF faces.

It supports:

• selectable body text
• searchable body text
• copyable body text
• selectable header/footer text
• selectable footer page numbers
• clickable PDF hyperlinks
• images
• backgrounds
• borders
• basic border radius
• text color, weight, italic, decoration, alignment, and spacing
• multi-page output
• manual page-break markers
• PDF password protection
• PDF permissions
• metadata
• compression
• headers, footers, and watermarks

Example:

<Html2Pdf render-mode="text" manual-pagination>

  <template #pdf-content>
    <main>
      <h1>Selectable report</h1>
      <p>You can select and search this text in the generated PDF.</p>

      <a href="https://www.npmjs.com/package/vue-pdf-export">
        Open vue-pdf-export on npm
      </a>
    </main>
  </template>
</Html2Pdf>

Selectable-text mode intentionally favors real PDF text over pixel-perfect parity with every browser CSS feature. See Selectable Text Mode Notes.