Frontend
I built vue-pdf-export - a Vue 3 PDF Export library for real-world browser apps
Saurabh Choudhary DEV Community
2 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
Aletheia: What If AI Stopped Trying to Be Your Answer?
Next →
When a Bug Isn't Really a Bug: How Architectural Constraints Hide Behind Technical Problems
Related
I Built a Documentation Tool in 48 Hours (While Running a Code Jam)
Frontend
2
Dev.to (EN Zone)
Google Authentication in ASP.NET Core with React
Frontend
3
Reddit r/programming
[Showoff Saturday] A new portfolio page!
Frontend
3
Reddit r/webdev
How I Built a Fast, Clean Wiki & Database for Steal an Egg
Frontend
6
Dev.to (EN Zone)
Comments0
No comments yet — be the first