Blog Post

Generate a PDF from HTML with Vue.js

Veronica Marini
Illustration: Generate a PDF from HTML with Vue.js

The task of converting HTML to PDF isn’t a trivial one, and it takes a considerable amount of code. Thankfully, nowadays, there are many libraries that can help us achieve this goal with a few simple lines. When researching said libraries, many people stumble upon html2pdf.js. In this blog post, we’ll use it in combination with Vue.js to generate a PDF from HTML.

If you prefer a video tutorial, you can watch our step-by-step guide:

Prerequisites

For this tutorial, we’re starting with a boilerplate Vue.js Single-File Component project using npm init vue@latest. We’ll assume you’re familiar with Vue.js. If you aren’t, we suggest first reading through the Vue.js guides.

Generating a PDF from HTML with html2pdf.js

To get started, first install html2pdf.js and its dependencies using npm by running npm install --save html2pdf.js in your terminal.

You’ll start with an App.vue file:

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

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

It’ll look like this:

Browser screenshot

To generate a PDF, you only have to add few lines of code to your project:

export default {
	name: 'app',
	methods: {
		exportToPDF() {
			html2pdf(document.getElementById('element-to-convert'));
		},
	},
};

The exportToPDF function takes a second parameter, an object, which allows you to configure some options that control how the PDF will look. The available options are margin, filename, pagebreak, image, enableLinks, html2canvas, and jsPDF. You can read more about them here.

For this example, you’ll use a couple of them:

{
  margin: 1,
  filename: "i-was-html.pdf",
}

The Full Solution

Here’s how the App.vuejs file will look after your changes:

<template>
  <div id="app" ref="document">
    <div id="element-to-convert">
      <center>
        <img width="400" src="./assets/constellation.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: "i-was-html.pdf",
			});
    },
  },
};
</script>

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

The result is a website with an image and an Export to PDF button that converts the image to PDF when clicked.

Conclusion

html2pdf.js allows us 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 few lines of code.

If you have — or predict having — more complex workflows and needs, PSPDFKit can help. For example, if you’re interested in automating the PDF generation process, please take a look at 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 our server-backed deployment of PSPDFKit for Web.

Related Products
Share Post
Free 60-Day Trial Try PSPDFKit in your app today.
Free Trial

Related Articles

Explore more
PRODUCTS  |  Web • Releases • Components

PSPDFKit for Web 2024.2 Features New Unified UI Icons, Shadow DOM, and Tab Ordering

PRODUCTS  |  Web

Now Available for Public Preview: New Document Authoring Experience Provides Glimpse into the Future of Editing

PRODUCTS  |  Web • Releases • Components

PSPDFKit for Web 2024.1 Adds LTV Support for Digital Signatures and Improves the Document Editor UI