HTML, or HyperText Markup Language, is the standard markup language used to create web pages and is an essential technology for building websites. It provides a structure for web content by using various elements and tags to define the different parts of a web page, such as headings, paragraphs, links, images, forms, and more.
There are many scenarios where it’s useful to export HTML content and then download it as a PDF, or Portable Document Format, document for easy sharing. HTML to PDF conversion is helpful for web apps that return documents like receipts, invoices, reports, or bank statements. It’s also useful for sharing dynamic web pages, and bulk data from web applications.
In this article, we’ll investigate and compare three popular HTML to PDF libraries for Node.js applications: Puppeteer, jsPDF, and PDFKit.
Jump ahead:
Puppeteer is a Node.js library developed by Google that provides a high-level API for controlling headless (or full) Chrome or Chromium browsers. It is the most popular open-source HTML-to-PDF converter, supporting HTML, CSS, and JavaScript.
Puppeteer allows you to automate various tasks in a web browser, such as web scraping, website testing, screenshot creation, and PDF generation. It leverages the capabilities of the Chrome or Chromium web browser to render HTML content into PDF files.
To set up and use Puppeteer, you’ll first need to initialize your Node.js project. To do so, run npm init-y in your Node.js project.
Next, install the Puppeteer library as a dependency in your project. It will download the necessary Chromium browser binaries automatically:
npm install puppeteer
Now, write the conversion script inside your JavaScript file. Here’s an example:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setContent('<h1>Hello, Puppeteer!</h1>');
await page.pdf({ path: 'example.pdf', format: 'A4' });
await browser.close();
console.log('Here's your PDF!.');
})();
In this script, we import the Puppeteer library, launch a headless Chromium browser, and create a new page in the browser. We also generate a PDF from the page content with specified options (such as path and format), and close the browser to release resources.
Next, execute your script using Node.js by running the following command:
node html-to-pdf.js
This will run the Puppeteer script, generate a PDF file named example.pdf with the specified content, and close the browser. You can customize the HTML content and PDF generation options according to your preferences.
jsPDF is a popular JavaScript PDF generator that allows users to generate PDF files in the web browser dynamically. The library is well-maintained, stable, easy to use, and has rich documentation.
jsPDF operates on the client side, making it well-suited for generating PDFs in web applications without needing server-side PDF generation. It can modify existing layouts, and allows users to control their PDFs by allowing customizations. It can also be used to edit existing PDF documents or create one from scratch, including content like images, tables, and shapes.
To set up and use jsPDF, you’ll need your HTML file and your JavaScript file, which will include the PDF conversion script. Your HTML file should define the content you want to convert to a PDF, including any HTML elements, text, and styles.
To start, include the jsPDF library by adding the following script tag to the <head> section of your HTML file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
You can also download the library and host it locally if needed.
Next, write the HTML to PDF conversion code inside your JavaScript file using jsPDF. Here’s a basic example:
document.addEventListener("DOMContentLoaded", function () {
const pdf = new jsPDF();
const element = document.body;
pdf.html(element, {
callback: function (pdf) {
// Save the PDF to a file or display it
pdf.save("output.pdf");
},
});
});
In this script, we wait for the DOM to be ready to ensure all HTML content is loaded. Then, we create a new jsPDF instance. In this case, we also specify the HTML element, document.body, that we want to convert to a PDF. We used the html() method to convert the HTML content to a PDF and save the generated PDF to a file named output.pdf using the save() method.
Now, include your JavaScript file in your HTML file by adding the following script tag before the closing </body> tag:
<script src="script.js"></script>
We trigger the HTML to PDF conversion by automatically running the script when the page loads. To do this, add the following code at the end of your JavaScript file:
Learn more →window.addEventListener("load", function () {
});
The above snippet triggers the PDF conversion, automatically converting the page to a PDF when it loads.
PDFkit is one of the oldest and most well-established PDF libraries in the JavaScript ecosystem; it is still well-maintained, and regularly updated. This library is a popular option for creating and manipulating PDF documents in a server-side environment, typically using Node.js. It allows you to programmatically generate PDF files by defining each page’s content, layout, and formatting.
PDFKit provides a high-level API for PDF document generation and supports various features, making it a versatile tool for creating custom PDFs. Several PDF libraries have been developed as wrappers around PDFKit, supporting custom fonts and image embedding.
To set up and use PDFKit, the first step is to initialize your Node.js project. To do so, run npm init-y in your Node.js project.
Next, install the PDFKit library as a dependency in your project by running the following code:
npm install pdfkit
Inside your JavaScript file, write the code for creating a PDF document and adding HTML content using PDFKit. Here’s a basic example:
const fs = require('fs');
const PDFDocument = require('pdfkit');
const doc = new PDFDocument();
const stream = fs.createWriteStream('example.pdf');
doc.pipe(stream);
doc.fontSize(12).text('Hello, Welcome to PDFKit!', { align: 'center' });
doc.end();
stream.on('finish', () => {
console.log('Here's your PDF!');
});
In this script, we import the fs (file system) module and the PDFDocument class from the PDFKit library, and then create a new PDF document using PDFDocument. Next, we pipe the PDF output to a writable stream or file named example.pdf.
We add HTML content to the PDF using the text method to specify font size and alignment. We end the document using doc.end(), and then handle the finish event of the stream to log a success message when the PDF is generated.
Now, execute your script using Node.js:
node html-to-pdf.js
This will run the script, generate a PDF file named example.pdf with the specified content, and save it to your project directory. You can customize the HTML content if you‘d like’.
For easy reference, here’s a summary of how the Puppeteer, jsPDF, and PDFKit libraries compare in terms of PDF generation, file size, browser integration, and community support:
| Puppeteer | jsPDF | PDFKit | |
|---|---|---|---|
| PDF generation | Generates PDFs from HTML and web page content | Generates PDFs from HTML and SVG content | Creates PDFs from scratch |
| File size | No control over PDF size | No control over PDF size | Provides control over PDF file size |
| Browser integration | Provides headless Chrome integration for web page rendering | No browser integration | No browser integration |
| Community support and update | Active community support and updates | Active community support and updates | Active community support and updates |
Choosing a conversion library for your Node.js project can be a bit daunting, but there are several great options available. If you want to generate PDF from scratch, PDFKit may be the best option. To quickly convert HTML or SVG content to PDFs, jsPDF may be more suitable. For web page rendering and interactive content, consider using Puppeteer.
The best HTML to PDF conversion library is heavily dependent on your project type and personal preference.
Monitor failed and slow network requests in productionDeploying a Node-based web app or website is the easy part. Making sure your Node instance continues to serve resources to your app is where things get tougher. If you’re interested in ensuring requests to the backend or third-party services are successful, try LogRocket.
LogRocket is like a DVR for web and mobile apps, recording literally everything that happens while a user interacts with your app. Instead of guessing why problems happen, you can aggregate and report on problematic network requests to quickly understand the root cause.
LogRocket instruments your app to record baseline performance timings such as page load time, time to first byte, slow network requests, and also logs Redux, NgRx, and Vuex actions/state. Start monitoring for free.
Knowing how to reduce unused JavaScript can help you save time, optimize performance, and improve efficiency.
MiniSim makes virtual emulator testing easy — learn how to use it to test both Android and iOS apps on macOS in this detailed post.
After internationalization, you can further localize your apps to make user experiences more friendly. Learn how to do this in TypeScript.
You can leverage containers to streamline the process of setting up a dev environment. Let’s see how using VS Code and Docker.
