Convert HTML to PDF easily with html2pdf.js

Q: What is html2pdf and how does it work?

html2pdf is a JavaScript library that converts HTML content to PDF. It uses html2canvas to capture the HTML as an image and jsPDF to generate a PDF file.

Q: How do I install and use html2pdf in a web project?

You can install html2pdf using npm with `npm install html2pdf.js` or include it via a CDN. Use the html2pdf function to convert HTML elements to a PDF by specifying the target element and any desired options.

Hulya Masharipov

In this post, you’ll learn how to convert HTML to PDF using html2pdf.js. This JavaScript library enables you to perform conversion entirely on the client side using only HTML, CSS, and JavaScript. This means you don’t need to have any server-side processing or dependencies to convert your HTML to PDF. Instead, the conversion process is done entirely in the browser, making it a fast and efficient way to generate PDFs.

Illustration: Convert HTML to PDF easily with html2pdf.js

What is html2pdf.js?

html2pdf.js is a lightweight JavaScript library that converts HTML content into a PDF document entirely on the client side. It integrates two key technologies:

html2canvas — Captures screenshots of HTML elements and converts them into canvas images.
jsPDF — Generates PDF files from the captured canvas images.

This makes html2pdf.js an efficient, dependency-free solution for developers who want to generate PDFs directly in the browser.

Key features of html2pdf.js

1. Client-side processing

One of the standout features of html2pdf.js is its ability to perform PDF conversions entirely on the client side. This eliminates the need for server-side dependencies, making it ideal for lightweight applications. By offloading the conversion process to the user’s browser, you can reduce server load and improve overall performance.

Advantages of client-side processing:

No server-side resources required.
Faster processing for users with modern browsers.
Enhanced privacy, as data stays on the client side.

2. Ease of use

html2pdf.js is designed with simplicity in mind. Its straightforward API allows developers to integrate PDF generation into their projects with minimal effort. Whether you’re converting a full webpage or a specific HTML element, the process is intuitive and requires only a few lines of code.

Steps to get started:

Include the library via CDN or npm.
Select the HTML element to convert.
Configure the conversion options.
Generate and save the PDF.

3. Customization options

html2pdf.js offers a wide range of customization options to ensure the PDF output meets your specific requirements. From setting margins and page orientation to adjusting image quality, you can tailor the PDF to your exact needs.

Customization features:

Page size and orientation — Choose from standard page sizes (e.g. A4, letter) and set the orientation (portrait or landscape).
Margins — Define margins to control the spacing around the content.
Image quality — Adjust the quality of images included in the PDF.
Headers and footers — Add custom headers and footers to your PDF.

Getting started with html2pdf

First, you’ll need to include html2pdf.js in your HTML file. You can do this by either downloading the library from the official GitHub repository or including it via a content delivery network (CDN):

<script
	src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.2/html2pdf.bundle.min.js"
	integrity="sha512-MpDFIChbcXl2QgipQrt1VcPHMldRILetapBl5MPCA9Y8r7qvlwx1/Mc9hNTzY+kS5kX6PdoDq41ws1HiVNLdZA=="
	crossorigin="anonymous"
	referrerpolicy="no-referrer"
></script>

Now that you’ve included the library in your project, follow the next steps to convert your HTML content to PDF.

Create the HTML content you want to convert to a PDF file. You can either use an existing HTML element on your webpage or create a new one. For this example, you’ll create a <div> containing some text and basic styling:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<title>HTML to PDF Using html2pdf</title>
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1"
		/>
		<!-- html2pdf CDN link -->
		<script
			src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.2/html2pdf.bundle.min.js"
			integrity="sha512-MpDFIChbcXl2QgipQrt1VcPHMldRILetapBl5MPCA9Y8r7qvlwx1/Mc9hNTzY+kS5kX6PdoDq41ws1HiVNLdZA=="
			crossorigin="anonymous"
			referrerpolicy="no-referrer"
		></script>
	</head>
	<body>
		<div id="content">
			<h1 id="my-element">Welcome to html2pdf Tutorial</h1>
			<p>
				This is an example of converting HTML content to a PDF file
				using the html2pdf JavaScript library.
			</p>
		</div>
		<script src="index.js"></script>
	</body>
</html>

Create a JavaScript file (e.g. index.js). Select the HTML element(s) you want to convert to PDF. This can be done using JavaScript DOM selectors. For example, if you want to convert the entire webpage, you can select the document.documentElement property, which represents the root element of the HTML document:

const element = document.documentElement;

This will select the <html> element and all of its children, including the <head> and <body> elements, to be converted to PDF. If you only want to convert a specific part of the page, you can select a different element using a CSS selector, such as an ID or class name, like this:

const element = document.querySelector('#my-element');

This would select the element with the ID my-element to be converted to PDF.

After selecting your HTML element(s), you can specify the conversion options you want to use. Some of the available options include the file name, paper size, page orientation, margins, and image quality. Here’s an example:

const options = {
	filename: 'my-document.pdf',
	margin: 1,
	image: { type: 'jpeg', quality: 0.98 },
	html2canvas: { scale: 2 },
	jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' },
};

In this example, you’re specifying that you want the PDF to be named 'my-document.pdf', and you want to use JPEG images with 98 percent quality. You’re also setting some options for html2canvas and jsPDF. Note that you can customize these options to suit your needs.

Finally, you can use the html2pdf() function to initiate the conversion and save the resulting PDF:

html2pdf().set(options).from(element).save();

In this example, you’re using the set() method to configure the conversion options, the from() method to specify the HTML element(s) to convert, and the save() method to save the PDF file.

Open the HTML file in a browser like Google Chrome, Mozilla Firefox, or Microsoft Edge. This will download the PDF file to your computer.

example output

Customization examples

html2pdf.js lets you customize the PDF output to suit your needs. Below are some examples of how to adjust the PDF settings.

Example 1: Set page size and orientation

const options = {
	jsPDF: { unit: 'mm', format: 'a4', orientation: 'landscape' },
};

Example 2: Add headers and footers

const options = {
	jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' },
	pagebreak: { mode: 'avoid-all', before: '#page2el' },
};

html2pdf.js provides many more configuration options and customization features that you can explore in its documentation.

Performance considerations and limitations

1. Handling large content

Converting large or complex HTML content can be resource-intensive. To optimize performance:

Break content into smaller sections.
Use pagination to split content across multiple pages.
Avoid excessive use of high-resolution images.

2. Browser compatibility

html2pdf.js is compatible with most modern browsers, including Chrome, Firefox, and Edge. However, some older browsers may not fully support its features. Always test your implementation across different browsers to ensure compatibility.

3. Limitations

While html2pdf.js is a powerful tool, it has some limitations:

CSS and JavaScript rendering — Certain CSS styles and JavaScript-driven content may not render accurately.
Advanced PDF features — Features like embedded fonts, annotations, and form fields aren’t supported.
Performance issues — Large documents may take longer to process and can strain system resources.

Alternatives to html2pdf.js

While html2pdf.js is a popular option for converting HTML to PDF, there are several other libraries and tools available for this purpose. Below are some of the alternatives to consider.

wkhtmltopdf — This is a command-line tool that uses the WebKit rendering engine to convert HTML to PDF. It supports advanced features such as headers and footers, tables of contents, and page numbering. However, it requires server-side processing and may not be as customizable as html2pdf.js.
Puppeteer — This is a Node.js library that provides a high-level API for controlling headless Chrome or Chromium browsers. It can be used to generate PDFs from HTML content, and it supports advanced features such as page breaks, headers and footers, and tables of contents. However, it requires server-side processing and may not be as lightweight as html2pdf.js.
Nutrient — We offer a couple of options for converting HTML to PDF:
- HTML-to-PDF API — A REST API and hosted solution that provides 100 free conversions per month and offers additional packages for a per-document fee. This option allows you to integrate HTML-to-PDF conversion into your applications without the need for self-hosting or a server setup.
- PDF Generation SDK — This allows you to generate a PDF from scratch, leveraging HTML and CSS technologies for highly flexible designs and context-customized PDFs for your users.

Nutrient’s solutions are regularly maintained, with releases occurring multiple times throughout the year. We also offer one-on-one support to handle any issues or challenges you encounter, which can be a significant advantage compared to open source solutions.

If you’re interested in Nutrient, you can contact our Sales team.

Conclusion

Overall, html2pdf.js is a useful library for generating PDFs from HTML content. It’s entirely client-side, so you don’t need to rely on any server-side processing or dependencies. The library provides many customization options, and it’s easy to use. If you need to generate PDFs from your HTML content, give html2pdf.js a try!

FAQ

What is html2pdf and how does it work?

html2pdf is a JavaScript library that converts HTML content to PDF. It uses html2canvas to capture the HTML as an image and jsPDF to generate a PDF file.

How do I install and use html2pdf in a web project?

You can install html2pdf using npm with npm install html2pdf.js or include it via a CDN. Use the html2pdf function to convert HTML elements to a PDF by specifying the target element and any desired options.

Can I customize the PDF layout using html2pdf?

Yes, you can customize the PDF layout by setting options such as image, margins, and file name.

What are the limitations of using html2pdf for PDF generation?

Limitations include handling large documents, complex layouts, and the potential for blurry output on high-resolution screens due to image-based rendering.

Author

Hulya Masharipov Technical Writer

Hulya is a frontend web developer and technical writer at Nutrient who enjoys creating responsive, scalable, and maintainable web experiences. She’s passionate about open source, web accessibility, cybersecurity privacy, and blockchain.

Explore related topics

Web JavaScript How To html2pdf