Vue PDF generation: Convert HTML to PDF with html2pdf.js in Vue.js

Introduction

Generating PDF documents is a common requirement in modern Vue.js applications — especially in use cases like invoices, reports, dashboards, and printable forms. Users often need to export content as downloadable, shareable, or printable PDFs with a single click.

Fortunately, Vue works well with several JavaScript libraries that handle client-side PDF generation. These tools convert DOM elements, render canvases, or define structured layouts directly in the browser, with no server required.

This guide will walk you through:

• How to use html2pdf.js to export Vue components to PDF
• How it compares to other options like jsPDF, pdfmake, and Nutrient Web SDK
• Example Vue components using each tool

If you prefer a video tutorial, watch the step-by-step walkthrough below.

Choosing the right Vue PDF library

Here’s a side-by-side comparison of popular tools for generating PDFs in Vue.js:

Overview of each library

html2pdf.js

html2pdf.js(opens in a new tab) is a lightweight library that captures existing HTML using html2canvas and converts it to PDF via jsPDF. It’s ideal for exporting static Vue component content like receipts, confirmations, or print-ready sections.

jsPDF

jsPDF(opens in a new tab) is a powerful tool for creating PDFs from scratch using JavaScript. It gives you fine control over layout, fonts, tables, and dynamic content, and it’s perfect for apps that generate reports or data-driven documents programmatically.

pdfmake

Designed for applications that require declarative layout and complex structure, pdfmake(opens in a new tab) lets you define content using JSON-like objects. It supports multipage formatting, custom fonts, table styles, and automatic pagination.

Nutrient Web SDK

Nutrient Web SDK is a professional SDK built for Vue.js and modern web apps. It supports:

• Generating PDFs from HTML or DOCX templates
• Merging, redacting, and manipulating PDFs
• Headless PDF generation (no UI required)
• Embedding a customizable PDF viewer with annotation, signing, and form support

Nutrient is fully client-side and requires no backend setup. It’s ideal for SPAs, enterprise platforms, and apps that need both document generation and interaction.

Learn more in the Vue.js PDF generation guide.

Prerequisites

To follow this Vue PDF tutorial, you should be familiar with Vue.js(opens in a new tab). If you’re new to Vue, take a moment to review the Vue.js guides(opens in a new tab) before continuing.

Create a Vue.js project

Start by scaffolding a new Vue application using the official tool:

npm create vue@latest

This will launch an interactive setup. For this tutorial, you can go with a minimal configuration — TypeScript and advanced testing tools aren’t required.

For example, you can skip Vue Router, Pinia, Vitest, and E2E testing. Optionally, you may enable Prettier and JSX support.

Once complete, navigate into your project directory:

cd vue-pdf-example

What is html2pdf.js?

html2pdf.js is a lightweight library that converts HTML elements into downloadable PDFs by capturing them as canvases and passing the output to jsPDF.

Why use it in Vue.js?

• Minimal setup and integration
• Best for converting static components (e.g. invoice sections, confirmation pages)
• Works well with Vue’s template system

The next section will walk you through how to use html2pdf.js in a Vue component to generate your first PDF.

How to generate a PDF in Vue.js using html2pdf.js

This section shows how to convert an image (or any HTML element) to a PDF using html2pdf.js inside a Vue.js component.

1. Install html2pdf.js

Install the html2pdf.js library via npm:

npm install html2pdf.js

The html2pdf.js GitHub repository(opens in a new tab) suggests using version 0.9.3 for the best stability. However, the latest version generally works well. If you encounter any rendering or compatibility issues, consider downgrading.

2. Setting up your Vue component

Update your App.vue file to include the content you want to convert and a button to trigger PDF generation. For this example, you’ll convert a simple image:

<template>
  <div id="app" ref="document">
    <div id="element-to-convert">
      <center>
        <img width="400" src="/logo.png" />
      </center>
    </div>
    <button @click="exportToPDF">Export to PDF</button>
  </div>
</template>

<style>
#app {
  margin-top: 60px;
  text-align: center;
}
</style>

🔁 Make sure logo.png is placed inside your public/ folder:

my-vue-project/
├── public/
│   └── logo.png  ← put image here

This template includes a centered image and a button that will trigger the PDF export when clicked. The ref="document" is optional but can be useful for targeting the component in your script.

3. Adding PDF generation logic

In your <script> section, import html2pdf.js and define the PDF generation method:

<script>
import html2pdf from "html2pdf.js";

export default {
  name: "App",
  methods: {
    exportToPDF() {
      html2pdf(document.getElementById("element-to-convert"), {
        margin: 1,
        filename: "generated-pdf.pdf",
      });
    },
  },
};
</script>

You can customize PDF output using additional options such as margin, image, pagebreak, and jsPDF settings. See the html2pdf.js options documentation(opens in a new tab) for details.

The full example

Here’s how your complete App.vue file should look:

<template>
  <div id="app" ref="document">
    <div id="element-to-convert">
      <center>
        <img width="400" src="/logo.png" />
      </center>
    </div>
    <button @click="exportToPDF">Export to PDF</button>
  </div>
</template>

<script>
import html2pdf from "html2pdf.js";

export default {
  name: "App",
  methods: {
    exportToPDF() {
      html2pdf(document.getElementById("element-to-convert"), {
        margin: 1,
        filename: "generated-pdf.pdf",
      });
    },
  },
};
</script>

<style>
#app {
  margin-top: 60px;
  text-align: center;
}
</style>

Run your Vue.js app with:

npm run dev

You’ll see a page with an image and a button. Clicking Export to PDF will generate and download a PDF containing the image.

Using jsPDF for dynamic PDF generation in Vue

jsPDF(opens in a new tab) is a powerful library that enables programmatic PDF creation directly in the browser using JavaScript. It’s well-suited for Vue.js applications that need to dynamically generate content like reports, invoices, or data exports based on user input or runtime data.

Unlike html2pdf.js, which captures and converts existing HTML, jsPDF lets you build PDFs from scratch using methods like .text(), .addImage(), and .autoTable().

Key features

• Define layout using code (coordinates, sizes, font styles)
• Add dynamic elements like charts, tables, or inputs
• Export and save with a customizable filename
• Great for data-driven applications

How to use jsPDF for PDF generation in Vue

1. Install jsPDF

   npm install jspdf

2. Import and use it in your Vue component

Create an instance of jsPDF and use its methods to add content and customize your PDF document. For example, you can add text to the PDF and then save it:

import jsPDF from "jspdf";

const doc = new jsPDF();

// Add text to the PDF.
doc.text("Hello world!", 10, 10);

// Save the PDF.
doc.save("document.pdf");

Here’s a complete example of using jsPDF in a Vue component to generate and download a PDF:

<template>
  <div>
    <button @click="generatePDF">Generate PDF</button>
  </div>
</template>

<script>
import jsPDF from 'jspdf';

export default {
  name: 'PDFGenerator',
  methods: {
    generatePDF() {
      // Create a new jsPDF instance.
      const doc = new jsPDF();

      // Add text to the PDF.
      doc.text("Hello world!", 10, 10);

      // Save the PDF with a filename.
      doc.save("document.pdf");
    },
  },
};
</script>

Using pdfmake for structured PDF layouts in Vue

pdfmake(opens in a new tab) is designed for developers who need to build highly structured and styled PDFs. It uses a declarative syntax where you define content in a docDefinition object, making it ideal for generating consistent layouts like tables, multicolumn pages, and styled text blocks.

Unlike html2pdf.js, which converts rendered HTML, pdfmake gives you fine-grained control by letting you define content in a JSON-like structure. In Vue (especially with Vite), you’ll need to import it carefully due to its CommonJS structure and font system.

Key features

• Create multipage layouts with headers, footers, and tables
• Define font styles, alignment, spacing, and page breaks
• Uses a JSON-like format that’s easy to serialize or generate dynamically
• Excellent for form-driven apps or document-heavy workflows

Creating PDFs in Vue with pdfmake

This section will demonstrate step by step how to integrate pdfmake into a Vue 3 project using the Options API(opens in a new tab).

Step 1 — Install pdfmake

First, install the pdfmake package using npm:

npm install pdfmake

Step 2 — Create a Vue component with a button

Build a simple component that lets the user click a button to generate a PDF:

<template>
  <div>
    <button @click="generatePDF">Generate PDF</button>
  </div>
</template>

Step 3 — Dynamically import pdfmake and its fonts

To ensure compatibility with Vite(opens in a new tab), you must import pdfmake and vfs_fonts dynamically within your method. This avoids build issues and prevents large fonts from bloating your main bundle:

<script>
export default {
  name: 'PDFGenerator',
  methods: {
    async generatePDF() {
      //  loads the main PDF engine
      const pdfMakeModule = await import('pdfmake/build/pdfmake');
      // loads the default Roboto font definitions
      const pdfFonts = await import('pdfmake/build/vfs_fonts');

      // Set the virtual font system (vfs).
      pdfMakeModule.default.vfs = pdfFonts.default;

      // Define document content.
      const docDefinition = {
        content: 'This is a sample PDF generated in Vue using pdfmake.',
      };

      // Generate and download the PDF.
      pdfMakeModule.default.createPdf(docDefinition).download('sample.pdf');
    },
  },
};
</script>

Clicking the Generate PDF button will dynamically load pdfmake, register the fonts, create a PDF from the defined content, and trigger its download as sample.pdf.

Final thoughts on Vue PDF generation

html2pdf.js(opens in a new tab) enables you to generate PDFs from HTML quickly and seamlessly. It’s a great choice for building simple applications that generate PDF documents. In this post, you saw how it’s possible to achieve this goal with a few lines of code.

If you have — or predict having — more complex workflows and needs, Nutrient can help. For example, if you’re interested in automating the PDF generation process, refer to our PDF generator API, which enables you to generate PDF files from HTML templates. You can style the CSS, add unique images and fonts, and persist your headers and footers across multiple pages.

If you’re also interested in displaying PDFs in a powerful and customizable viewer that provides a number of advanced functionalities like annotating PDFs or digitally signing them, we recommend checking out Document Engine.

Related tutorials

If you’re working across different frameworks or platforms, these guides may also be useful:

• How to generate a PDF with JavaScript
• How to convert HTML to PDF using React
• How to generate PDF reports from HTML in C#
• How to convert HTML to PDF using wkhtmltopdf and Python

FAQ