Vue HTML to PDF Examples
vue-pdf-export is a Vue 3 and TypeScript browser PDF package available on npm. These examples use the v1 API for installations up to 1.1.1. The migration guide explains object layers, Vue slots, composition and smart pagination in the current release.
1. Vue PDF with selectable text
Set render-mode="text" to generate supported document text as native PDF text. Canvas mode instead captures visual page images.
<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)
</script>
<template>
<button type="button" @click="pdf?.generatePdf()">Export report</button>
<Html2Pdf ref="pdf" render-mode="text" :manual-pagination="true" filename="report.pdf">
<template #pdf-content><article><h1>Report</h1><p>Select or search this PDF text.</p></article></template>
</Html2Pdf>
</template>
Text mode supports a narrower CSS subset than Canvas. See the rendering modes guide.
2. Nuxt 3 or Nuxt 4 PDF export
Package imports are SSR-safe. Generate only from a browser event; <ClientOnly> is useful when the export UI does not need server rendering.
<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)
</script>
<template>
<ClientOnly>
<button type="button" @click="pdf?.generatePdf()">Export PDF</button>
<Html2Pdf ref="pdf" :manual-pagination="true">
<template #pdf-content><article>Nuxt browser PDF</article></template>
</Html2Pdf>
</ClientOnly>
</template>
See the Nuxt SSR guide for hydration and lazy-loading patterns.
3. Page break, header, footer and Blob
The 1.1.1 component uses direct layer props. Disable download when your application handles the returned Blob itself.
<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 getBlob() {
const blob = await pdf.value?.generatePdf()
if (blob) console.log(blob.size)
}
</script>
<template>
<button type="button" @click="getBlob">Generate Blob</button>
<Html2Pdf ref="pdf" :enable-download="false" :manual-pagination="true"
:inject-header="true" header-text="Quarterly report"
:inject-footer="true" footer-mode="text" footer-template="Page {n} of {total}">
<template #pdf-content>
<section>Page one</section>
<div class="html2pdf__page-break"></div>
<section>Page two</section>
</template>
</Html2Pdf>
</template>
See pagination, headers, footers, and Blob, ArrayBuffer and Base64 output.
When to use this package instead of direct html2pdf.js or jsPDF
vue-pdf-export packages Vue component and composable APIs around PDF generation. It provides a selectable-text renderer alongside Canvas capture, browser preview/download/print, pagination helpers, headers, footers, watermarks, output serialization and Nuxt import guidance. Direct html2pdf.js or jsPDF use gives you lower-level control and may fit a small custom pipeline. Choose the package when its documented Vue integration and built-in workflows match your needs; choose direct libraries when you prefer to assemble those behaviors yourself. Verify CSS fidelity and PDF features against your own documents.