Selectable Text Mode

Selectable-text mode uses a browser-layout-to-vector-PDF renderer rather than html2canvas for the main body content.

What it is designed to preserve

• real PDF text
• selection/search/copy
• text line placement based on browser layout
• common font weight/style/color/alignment
• backgrounds
• borders
• images
• opacity
• overflow clipping
• multi-page layout
• clickable links

Current limitations

Some browser CSS/features are not fully reproduced in selectable-text mode, including or depending on renderer support:

• complex stacking-context / z-index reordering
• background images and gradients
• shadows
• CSS transforms
• custom TTF/web-font embedding
• some non-WinAnsi glyphs such as CJK/emoji
• pseudo-elements such as ::before / ::after
• native list markers in some layouts
• RTL text
• position: fixed
• complex rounded clipping
• native break-inside: avoid semantics inside the vector renderer

For those cases, prefer renderMode="canvas".

Font metric differences

Selectable text uses PDF font metrics, which can differ slightly from browser web-font metrics. Most normal text is visually close, but highly stylized button/link text with large letter spacing or fixed widths can look different.

Header/footer text

In selectable-text mode, plain header/footer text and footer page-number text are emitted as real selectable PDF text. Complex HTML styling may be simplified to preserve selectability.

Security

Selectable-text mode supports PDF encryption because the vendored vector renderer passes the package's jsPDF constructor options at document creation time.

Rendering modes reference

Canvas mode

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

<Html2Pdf render-mode="canvas" />

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

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.

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.

Selectable text mode

<Html2Pdf render-mode="text" />

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

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" :security="security" :metadata="metadata" :compress="true">

  <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.