Selectable Text Mode

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

How do I generate a searchable PDF in Vue 3?

Install vue-pdf-export, import Html2Pdf and its stylesheet, set render-mode="text", then call generatePdf() from a component ref after the Vue component mounts. The returned value is a PDF Blob; with enable-download enabled, the component also downloads it. This example uses the published 1.3.0 API.

npm install vue-pdf-export@1.3.0

<script setup lang="ts">
import { ref } from 'vue'
import { Html2Pdf } from 'vue-pdf-export'
import 'vue-pdf-export/style.css'

const pdf = ref<InstanceType<typeof Html2Pdf> | null>(null)

async function downloadReport() {
  const blob = await pdf.value?.generatePdf()
  if (blob) console.log(`Generated ${blob.size} PDF bytes`)
}
</script>

<template>
  <button type="button" @click="downloadReport">Download searchable PDF</button>
  <Html2Pdf ref="pdf" render-mode="text" filename="searchable-report.pdf" :enable-download="true">
    <template #pdf-content>
      <article><h1>Monthly report</h1><p>This body text is selectable and searchable.</p></article>
    </template>
  </Html2Pdf>
</template>

The PDF body text can be selected, copied and searched in a compatible viewer. Test the result with your fonts and browser: not every CSS effect or glyph has a native-text equivalent. In Nuxt, follow the SSR guide and start generation only in the browser. For older installations, use the matching versioned reference before copying 1.3.0 options.

Vue PDF export: which renderer should I use?

Use renderMode="canvas" when matching complex browser CSS matters most. It uses the html2pdf.js / html2canvas / jsPDF path, so PDF body text is drawn as an image. Use renderMode="text" when users need to select, search or copy body text in the PDF. Both modes work through the same Vue component and support preview, download and Blob output. Start with the Vue quick start, then compare rendering modes.

The package adds Vue components, typed options, slots and pagination controls around these workflows. Selectable-text mode has its own CSS limits below; it is not a pixel-for-pixel replacement for the Canvas path.

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
• CFF-outline OTF and WOFF/WOFF2 embedding; v1.3.0 supports registered TTF and TrueType-outline OTF files
• 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".

In v1.3.0, fonts can register TTF or TrueType-outline OTF files for selectable text. Without a registered file, unrecognized CSS font families still map to built-in PDF fonts. Inline SVG shapes are rasterized in this mode. See fonts, charts, SVG and images.

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