Frontend
I built vue-pdf-export - a Vue 3 PDF Export library for real-world browser apps
Saurabh Choudhary DEV Community
23 views
Hey everyone 👋
I recently released vue-pdf-export, a Vue 3 + TypeScript library for generating PDFs directly in the browser.
I built it after repeatedly needing the same PDF features across different Vue projects and wanting one reusable solution instead of rebuilding the same logic each time.
What it supports
Some of the main features include:
Canvas and selectable-text PDF rendering
Automatic and manual pagination
Preview, download, and browser print
Headers and footers
Watermarks and page targeting
Clickable PDF links
Password protection and permissions
PDF metadata and compression
Progress reporting and cancellation
Large-document rendering
Blob, ArrayBuffer, Base64, and PDF data URL outputs
data-pdf-ignore for excluding UI elements from exports
Export-only page and body styling
Nuxt 3 and Nuxt 4 SSR-safe package imports
The package also has compatibility coverage for npm, pnpm, Yarn, Yarn Plug'n'Play, and Bun.
Install
npm install vue-pdf-export
Basic usage
<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 @click="pdf?.generatePdf()">
Generate PDF
</button>
<Html2Pdf
ref="pdf"
filename="example.pdf"
>
<template #pdf-content>
<h1>Hello from Vue</h1>
<p>This content will be exported to PDF.</p>
</template>
</Html2Pdf>
</template>
Canvas or selectable text
Use Canvas rendering when HTML/CSS fidelity is the priority:
<Html2Pdf render-mode="canvas">
Or use selectable-text rendering when users need to select, search, and copy text from the generated PDF:
<Html2Pdf render-mode="text">
This makes the package useful for both highly visual layouts and text-heavy documents such as reports, invoices, statements, and documentation.
Programmatic output
The generated PDF can also be used directly in your application:
const blob = await pdf.value?.generatePdf()
const buffer = await pdf.value?.generatePdfArrayBuffer()
const base64 = await pdf.value?.generatePdfBase64()
This is useful when you want to upload, store, preview, or pass the PDF to another API instead of immediately downloading it.
Nuxt support
The package is designed so importing it does not crash Nuxt SSR.
Actual PDF generation still happens in the browser, so a typical Nuxt integration can use ClientOnly or lazy client-side rendering when needed.
Try it
🧪 Live Playground
https://vue-pdf-export-playground.vercel.app/
📖 Documentation
https://vue-pdf-export-docs.vercel.app/
📦 npm
https://www.npmjs.com/package/vue-pdf-export
💬 Feature requests & feedback
https://vue3-pdf-export.canny.io/
I’d really appreciate feedback from Vue and Nuxt developers, especially around real-world PDF edge cases, API ergonomics, pagination, large documents, or features you would expect from a Vue PDF library.
The project is still evolving, and real-world feedback is one of the most useful inputs for deciding what to improve next.
Read original: https://dev.to/saurabhzaiswal/i-built-vue-pdf-export-a-vue-3-pdf-export-library-for-real-world-browser-apps-27km
← Previous
A Severe Misalignment of AI in Mathematics (Declaration by 25 Fields Medalists) [D]
Next →
When a Bug Isn't Really a Bug: How Architectural Constraints Hide Behind Technical Problems
Related
validation-br 2.0: Validação em TypeScript, zero dependências
Frontend
52
Dev.to (EN Zone)
The same one-line table-parsing bug turned up in five separate tools. I fixed it four times.
Frontend
40
DEV Community
How to Price Web Design Projects: A Practical Guide for Freelancers
Frontend
36
Dev.to (EN Zone)
Post Apache Ossie, what distinguishes semantic layers?
Frontend
41
Dev.to (EN Zone)
Comments0
No comments yet — be the first