Convert HTML to PDF Using Node.js – Step-by-Step Guide

Converting HTML to PDF is a common task for developers — whether you’re generating invoices, reports, or saving web pages for offline use. In this guide, we’ll show you how to convert HTML to PDF using Node.js, step by step, with a practical example that works out of the box.

Why Convert HTML to PDF with Node.js?

Node.js is a powerful JavaScript runtime that allows you to automate server-side tasks. Converting HTML to PDF with Node.js offers several benefits:

• Automation: Generate PDFs on the server without manual steps.
• Customizability: Control page size, margins, and styling.
• Scalability: Integrate into APIs or backend services.

Prerequisites

Before you start, make sure you have:

• Node.js installed (v14+ recommended)
• Basic knowledge of JavaScript
• A sample HTML page or URL to convert
• Optional: VS Code or your preferred Node.js editor

Step 1: Install Puppeteer

Puppeteer is a popular Node.js library that controls headless Chrome. It’s perfect for converting HTML pages to PDF.

npm install puppeteer

Step 2: Create a Simple Conversion Script

Create a file called convert.js in your project folder:

const puppeteer = require('puppeteer');

(async () => {
  try {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com', { waitUntil: 'networkidle2' });
    await page.pdf({
      path: 'output.pdf',
      format: 'A4',
      printBackground: true
    });
    console.log('PDF successfully created!');
    await browser.close();
  } catch (error) {
    console.error('Error generating PDF:', error);
  }
})();

Step 3: Run Your Script

Run the script in your terminal:

node convert.js

Check your project folder — you should now see output.pdf with your HTML content converted perfectly!

Step 4: Customize Your PDF

You can tweak margins, orientation, and background rendering to better match your brand or layout needs:

await page.pdf({
  path: 'custom.pdf',
  format: 'A4',
  margin: { top: '20px', right: '20px', bottom: '20px', left: '20px' },
  printBackground: true,
  landscape: false
});

• Margins: Control spacing around your content.
• Landscape: Switch between portrait and landscape.
• Backgrounds: Include CSS backgrounds.

Step 5: Handling Dynamic Content

If your HTML page has dynamic content (like charts or JavaScript-generated elements), wait for it to load fully:

await page.goto('https://example.com', { waitUntil: 'networkidle0' });

Common Errors & Fixes

Here are a few issues you might run into while generating PDFs in Node.js — and how to fix them quickly: