Powerful
Choose faithful Canvas rendering or real selectable PDF text. Control page breaks, headers, footers and watermarks.
Compare rendering modesVue HTML to PDF for Vue 3 and Nuxt
Turn Vue component into PDF worth sharing.
Turn your Vue components into PDFs in the browser. Choose Canvas fidelity or selectable text, then add pagination, Vue header and footer slots, watermarks, custom font, chart, SVG and image quality controls, preview and download when your app needs them.
Fits your Vue stackVerified consumer and SSR compatibility.
Vue 3 Nuxt 3 & 4 TypeScript
Built for your Vue workflow
Start simple. Shape the PDF your way.
One package for Vue 3 and Nuxt 3/4, with guides that take you from a first export to a custom document.
Modular
Use the Html2Pdf component or composable in Vue 3 and Nuxt 3/4. Add Vue slots and typed options as your workflow grows.
Explore the component APICustomizable
Style your exported content and theme the built-in preview and loader. PDF engines load when generation needs them.
Customize your PDF and UIPowerful features
Everything needed for real browser PDF workflows.
Use one Vue-oriented API across visual Canvas exports and selectable-text PDFs, with SSR-safe imports, multiple output formats and export-only customization.
Selectable & searchable text
Use real PDF text for reports, invoices and documents where selection, search, copy and crisp typography matter.
Custom fonts & charts
Wait for browser fonts, embed supported TTF/OTF files in selectable text and capture chart canvases for export.
SVG & image controls
Choose SVG preparation and opt into image DPI, JPEG quality, transparency and repeated-image reuse.
Page-by-page Canvas rendering
Render logical pages incrementally instead of depending on one giant document-height canvas.
Blob, ArrayBuffer & Base64
Generate the PDF once, then consume it as Blob, ArrayBuffer, raw Base64 or a PDF data URL without re-rendering.
Nuxt 3 & Nuxt 4 SSR
SSR-safe package imports with browser-side generation guidance for ClientOnly, lazy loading and hydration-safe Nuxt apps.
Cancellation & page progress
Cancel long-running exports and expose stage, percentage, currentPage and totalPages for useful progress UI.
Headers & footers with Vue slots
Configure typed header and footer objects, render custom Vue slots, target pages and add page numbering.
Smart pagination & composition
Control container and table-row breaks, repeat table headings and insert existing PDF pages before or after generated pages.
Watermarks & page targeting
Add text, image or trusted HTML watermarks with design presets, foreground or background placement, opacity, rotation and page targeting.
Security & document options
Passwords, permissions, metadata and jsPDF stream compression are available across supported rendering workflows.
Clickable PDF links
Preserve anchors as real PDF link annotations, including selectable link text in text rendering mode.
Export-only DOM control
Use data-pdf-ignore and export styling APIs without permanently mutating the live application DOM.
Preview, download & print
Use the same generation flow for Blob output, in-app preview, downloads and browser printing in Canvas or text mode.
PDF-only styling
Apply page/body backgrounds, classes, inline styles, themes and per-page customization only to the export copy.
Application-ready outputs
Generate once. Use the PDF where your app needs it.
Blob remains the browser-friendly default. The package also exposes ArrayBuffer and Base64 serialization from the generated Blob without running the renderer a second time.
Blob
Recommended default for browser downloads, previews and large PDFs.
ArrayBuffer
Convenient for storage, upload pipelines and binary application APIs.
Base64 / data URL
Useful for transport and embedding when text serialization is required.
Two rendering paths
Choose browser fidelity or real PDF text.
Both modes keep the same component flow for Blob output, preview, download, print and post-processing.
renderMode="canvas"
Maximum HTML/CSS fidelity
Best for highly visual layouts, gradients, shadows, transforms and browser-styled documents. Paginated documents can use the incremental page-by-page Canvas path.
Read Canvas guidancerenderMode="text"
Selectable, searchable PDF text
Best for reports and text-heavy documents where selection, Ctrl/Cmd + F, copy and crisp text are important. Some advanced browser CSS can render differently.
Read text-mode guidanceLarge-document engineering
Measured bottlenecks, then changed the architecture.
The performance work covers page-bounded Canvas rendering, static footer reuse, repeated-image caching, cancellation, cleanup, browser yielding, memory isolation and stress regressions.
page Canvas regression coverage
Real non-empty incremental exports verified.
smaller peak capture geometry
~99.96M px giant capture → ~1.74M px page-sized capture in the benchmark fixture.
static HTML footer benchmark
Footer without logo after render-once reuse optimization.
footer-heavy PDF fixture
Measured output-size reduction after static footer reuse.
Current verified range
Explore Performance Engineering 50-page and 100-page Canvas exports are verified in the current regression suite. 100 pages is a tested range, not a hard package limit; real limits depend on content, images, renderer, security, browser memory and device resources.
Get started
One component, familiar Vue.
<script setup lang="ts">
import { ref } from 'vue'
import { Html2Pdf } from 'vue-pdf-export'
import 'vue-pdf-export/style.css'
const pdfRef = ref<InstanceType<typeof Html2Pdf> | null>(null)
</script>
<template>
<button @click="pdfRef?.generatePdf()">Generate PDF</button>
<Html2Pdf ref="pdfRef" render-mode="canvas" manual-pagination>
<template #pdf-content>
<h1>My report</h1>
</template>
</Html2Pdf>
</template>Documentation
Go directly to the part you need.
Versioned referencesComplete guides for 1.1.1, 1.2.0, 1.2.1 and 1.3.0.Vue to PDF guideChoose Canvas, selectable text or server generation for your document.Nuxt SSRNuxt 3/4 imports, ClientOnly, hydration and browser-side generation.Smart paginationSplit containers, table rows, repeated headings and diagnostics.PDF compositionInsert existing PDF pages before and after generated output.PDF stylingExport-only backgrounds, classes, styles, themes and data-pdf-ignore.HeadersObjects, Vue slots, logos, page targeting and spacing.FootersObjects, Vue slots and Page {n} of {total} numbering.SecurityPasswords, owner password, permissions and client-side boundaries.WatermarksText/image, layers, repeat mode, opacity, rotation and page targeting.Fonts, charts & imagesFont embedding, chart snapshots, SVG fallback and opt-in image optimization.Programmatic APIBlob, ArrayBuffer, Base64, print, close, reset and cancellation.Playground & stress testsTry features interactively and exercise larger page-count presets.
Common questions
How do you generate a PDF in Vue?
Start with the component, then choose the output and rendering behavior your document needs.
How do I turn a Vue component into a PDF?
Install vue-pdf-export, render your content in the #pdf-content slot, and call generatePdf() through a component ref. See the Vue 3 quick start and installation steps.
Can users search and copy text in the exported PDF?
Yes. Set render-mode="text" to create selectable, searchable body text. The default Canvas mode favors browser layout fidelity and paints the body as page images. Compare the rendering modes.
Can I generate a PDF from a Nuxt page?
Yes. Imports are SSR safe, and generation runs in the browser after mounting. The Nuxt 3 and Nuxt 4 guide covers ClientOnly and client event patterns.
Can I combine existing PDF pages with Vue output?
Yes. The composition options prepend or append whole pages from existing PDF sources. They do not edit arbitrary content inside those pages. See PDF page composition.
Acknowledgements
Thank you to the people and projects that helped make this package possible.
Selectable-text rendering is based on and adapted from @timkozlov/html-to-pdf. The vendored source remains under its original MIT license notice.