Vue.js HTML to PDF Generator

1.8.0 · active · verified Tue Apr 21

vue-html2pdf is a Vue.js wrapper component that facilitates client-side PDF generation directly from HTML content within Vue components, leveraging the robust capabilities of the html2pdf.js library internally. The package allows developers to easily convert any Vue component's template or arbitrary HTML element into a downloadable PDF document. Currently, the stable version is 1.8.0. While there isn't a strict release cadence specified, updates address breaking changes and new features. Key differentiators include its simple component-based API, extensive props for controlling PDF quality, format, orientation, and content width, and a comprehensive event system for managing the entire generation lifecycle, including pagination and pre-download hooks. It provides specific integration guidance for Nuxt.js projects and offers fine-grained control over the underlying html2pdf.js library through event arguments.

Common errors

```
ReferenceError: VueHtml2pdf is not defined
```
cause Attempting to use `vue-html2pdf` in a server-side rendering (SSR) context (e.g., Nuxt.js) without specifying client-side only.

fix For Nuxt.js, ensure the plugin is configured with `mode: 'client'` in `nuxt.config.js` and wrap component usage in `<client-only>` tags in your templates. Example: `<client-only><VueHtml2pdf ...></VueHtml2pdf></client-only>`.
```
TypeError: Cannot read properties of undefined (reading 'generatePdf')
```
cause The component reference (`this.$refs.html2Pdf`) is not available or the `generatePdf` method is called before the component is fully mounted or rendered.

fix Ensure the `vue-html2pdf` component is present in the DOM and accessible via its ref. If calling immediately, consider wrapping the call in `this.$nextTick(() => this.$refs.html2Pdf.generatePdf())` to ensure the component is mounted.

Warnings

breaking Several event names were changed in version 1.8.x. `hasStartedDownload` became `startPagination`, and `hasGenerated` became `hasDownloaded`. New events like `hasPaginated` and `beforeDownload` were also introduced.
Fix: Review and update all event listeners in your Vue components to use the new event names (`@startPagination`, `@hasDownloaded`, etc.) as per the 1.8.x migration guide.
gotcha When using the `@beforeDownload` event to gain full control over the underlying html2pdf.js instance (e.g., for custom headers/footers or page numbering), you must manually disable automatic PDF generation and download.
Fix: Set the props `:enable-download="false"` and `:preview-modal="false"` on the `vue-html2pdf` component when implementing custom logic within the `@beforeDownload` event.

Install

npm install vue-html2pdf npm
yarn add vue-html2pdf yarn
pnpm add vue-html2pdf pnpm

Imports

VueHtml2pdf
wrong:
```
import { VueHtml2pdf } from 'vue-html2pdf'
```
correct:
```
import VueHtml2pdf from 'vue-html2pdf'
```
The component is exported as a default export. Use this for direct component registration or local usage.
VueHtml2pdf (as Plugin)
wrong:
```
const VueHtml2pdf = require('vue-html2pdf'); Vue.use(VueHtml2pdf)
```
correct:
```
import VueHtml2pdf from 'vue-html2pdf'; Vue.use(VueHtml2pdf)
```
When using in Nuxt.js, register this as a client-side plugin. Ensure the plugin configuration in `nuxt.config.js` sets `mode: 'client'`.

Quickstart

This quickstart demonstrates how to import and use the `VueHtml2pdf` component in a Vue application, trigger PDF generation programmatically, and listen to key lifecycle events like progress and completion.

import VueHtml2pdf from 'vue-html2pdf';

export default {
  components: {
    VueHtml2pdf
  },
  methods: {
    generateReport() {
      // This method is called to trigger PDF generation.
      // It accesses the component via its ref and calls the generatePdf method.
      this.$refs.html2Pdf.generatePdf();
    },
    onProgress(event) {
      console.log(`PDF generation progress: ${event}%`);
    },
    hasStartedGeneration() {
      console.log('PDF generation has started.');
    },
    hasGenerated(event) {
      console.log('PDF has been successfully generated.', event);
    }
  },
  template: `
    <div>
      <button @click="generateReport">Generate PDF</button>
      <vue-html2pdf
        :show-layout="false"
        :float-layout="true"
        :enable-download="true"
        :preview-modal="true"
        :paginate-elements-by-height="1400"
        filename="my-document"
        :pdf-quality="2"
        :manual-pagination="false"
        pdf-format="a4"
        pdf-orientation="landscape"
        pdf-content-width="800px"
        @progress="onProgress($event)"
        @hasStartedGeneration="hasStartedGeneration()"
        @hasGenerated="hasGenerated($event)"
        ref="html2Pdf"
      >
        <section slot="pdf-content">
          <h1>Hello, Vue-HTML2PDF!</h1>
          <p>This is a sample content that will be converted into a PDF document.</p>
          <img src="https://via.placeholder.com/300x150.png?text=Image" alt="Placeholder Image" style="width: 300px; height: 150px;" />
          <p>More content here to potentially trigger pagination if height exceeds 1400px.</p>
        </section>
      </vue-html2pdf>
    </div>
  `
}

view raw JSON →