Question

I Kept Rebuilding PDF Features in Vue 3, So I Built vue3-pdf-export

I recently published vue3-pdf-export, an open-source Vue 3 + TypeScript package for generating PDFs directly from HTML in browser applications.

A Vue 3 + TypeScript package for generating PDFs from HTML with
pagination, preview, headers, footers, watermarks, security, metadata,
compression, and more.

Why I built it

Before publishing vue3-pdf-export, I had already worked on PDF generation in different projects, including Google projects, CRM applications, and other Vue-based applications.

I tried different HTML-to-PDF approaches and existing libraries, but in real projects I often ended up building my own custom Vue PDF component around them to handle the specific requirements I needed.

Whenever a new project needed PDF generation, I found myself solving many of the same problems again:

• pagination
• page breaks
• preview
• download
• printing
• headers and footers
• image handling
• different PDF options

This time, instead of creating another project-specific component, I decided to build a cleaner and more complete solution that I could reuse across Vue 3 projects.

That became vue3-pdf-export.

The main reason was simple: I did not want to keep rebuilding the same PDF functionality again and again.

And if it can also save time for other Vue developers who need similar PDF features, even better.

Installation

npm install vue3-pdf-export

Basic usage

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

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

async function generate() {
  await pdf.value?.generatePdf()
}
</script>

<template>
  <button @click="generate">
    Generate PDF
  </button>

  <Html2Pdf
    ref="pdf"
    filename="example.pdf"
    :preview-modal="true"
  >
    <template #pdf-content>
      <main>
        <h1>Hello from Vue</h1>
        <p>This content will be exported to PDF.</p>
      </main>
    </template>
  </Html2Pdf>
</template>

What it supports

The package has grown beyond basic HTML-to-PDF conversion.

Pagination

It supports both automatic and manual pagination.

For an explicit manual page break:

<div class="html2pdf__page-break"></div>

There are also options for keeping elements together and avoiding unwanted page breaks.

Headers

Headers can contain:

• plain text
• trusted HTML
• optional logos
• custom backgrounds and text colors
• configurable logo dimensions
• selected-page targeting

For example, a header can appear on:

• all pages
• the first page only
• the last page only
• every page except the first
• explicit page numbers

Selective header targeting also uses page-aware spacing, so header space is reserved only where the header is actually rendered.

Footers

Footers support:

• HTML mode
• text mode
• trusted HTML content
• optional logos
• configurable logo dimensions
• background and text colors
• page-number templates

For example:

Page {n} of {total}

Header and footer logos preserve their aspect ratio instead of being stretched into a fixed box.

Watermarks

Watermarks can be:

• text or image
• foreground or background
• single or repeated
• rotated
• positioned
• configured with opacity
• targeted to selected PDF pages

PDF security

You can optionally generate password-protected PDFs with:

• user/open password
• owner password
• configurable permissions
• password construction from multiple password parts

Metadata and compression

PDF metadata can include:

• title
• author
• subject
• keywords
• creator

jsPDF stream compression can also be enabled when needed.

Progress reporting

Large PDF generation can take some time, so the library reports both numeric progress and generation stages.

Stages include:

pagination
images
preparing
rendering
watermark
header
footer
metadata
serializing
complete

This makes it easier to build a proper loading UI instead of showing an indefinite spinner.

Why I built it

The goal was not to hide html2pdf.js, html2canvas, or jsPDF.

Those libraries still do important work underneath.

The goal was to provide a Vue-oriented layer around them so common production requirements do not have to be rebuilt for every project.

I also wanted developers to retain access to advanced html2pdf.js and jsPDF options when the higher-level API is not enough.

Browser testing

The package includes automated tests and Playwright E2E coverage across:

• Chromium
• Firefox
• WebKit

I wanted PDF generation itself, not only the Vue component, to be exercised in real browser engines.

Current release

The current release is:

vue3-pdf-export v0.2.0

This release includes improvements around:

• trusted HTML headers
• trusted HTML footers
• optional header and footer logos
• configurable logo sizing
• aspect-ratio-safe logo rendering
• page-aware header behavior
• selective page targeting
• PDF generation testing

Try it

🌐 Live Playground
Explore the features and see how vue3-pdf-export works in the browser:
vue3-pdf-export.vercel.app

📦 npm Package
Install and use the package in your Vue 3 project:
npmjs.com/package/vue3-pdf-export

The project is available as an npm package for Vue 3 applications.

If you are building a Vue 3 application that needs client-side PDF generation, I would love to know what use cases or edge cases you are dealing with.

If you find a bug or have an idea for an API improvement, feel free to let me know.