HTML to PDF in JavaScript: 5 libraries compared (2026)

How to convert HTML to PDF in JavaScript

The simplest way to convert HTML to PDF in JavaScript is with html2pdf.js. Add the library via CDN, select your HTML element, and call html2pdf().from(element).save().

// Include via CDN: https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js
const element = document.getElementById('content');
html2pdf().from(element).save('document.pdf');

This works for simple documents. For better CSS support, use Playwright (server-side) or Nutrient (managed API). For structured data like invoices, use pdfmake.

Five ways to convert HTML to PDF in JavaScript

JavaScript developers have five main approaches, each with different tradeoffs:

1. HTML-to-image libraries (html2pdf.js) — Quick setup, converts HTML to canvas then PDF
2. Programmatic builders (jsPDF, pdfmake) — Build PDFs from data, selectable text
3. Server-side automation (Playwright) — High fidelity, full CSS support
4. Document platforms (Nutrient) — SDKs and APIs with viewing, signing, and more
5. Custom solutions — Full control but significant development overhead

This guide covers the first four options, comparing their capabilities, performance, and ideal use cases.

Open source vs. commercial: Tradeoffs

Open source libraries (html2pdf.js, pdfmake, Playwright) are free to use and work well for many use cases. Commercial solutions like Nutrient add features that matter for larger deployments:

Choose based on your scale, support needs, and feature requirements.

Nutrient

Nutrient is a document processing platform with SDKs for web, iOS, Android, .NET, Java, and Node.js. Beyond HTML-to-PDF conversion, it handles viewing, annotations, eSignatures, redaction, OCR, and AI-powered extraction.

For HTML-to-PDF conversion, Nutrient offers several options.

• Document Engine — Self-hosted server API with full CSS support. Converts HTML forms into fillable PDF fields. Chain operations like merging, watermarking, and page manipulation in one call.

curl -X POST http://localhost:5000/api/build \
  -H "Authorization: Token token=<API token>" \
  -F page.html=@/path/to/page.html \
  -F instructions='{ "parts": [{ "html": "page.html" }] }' \
  -o result.pdf

• Processor API — Cloud-hosted API for serverless workflows. Supports PDF generation, conversion, OCR, and batch processing.

// Node.js example
// This code requires Node.js. Do not run this code directly in a web browser.

const axios = require('axios')
const FormData = require('form-data')
const fs = require('fs')

const formData = new FormData()
formData.append('html', fs.createReadStream('index.html'))

(async () => {
  try {
    const response = await axios.post('https://api.nutrient.io/processor/generate_pdf', formData, {
      headers: formData.getHeaders({
        'Authorization': 'Bearer your_api_key_here'
      }),
      responseType: "stream"
    })

    response.data.pipe(fs.createWriteStream("result.pdf"))
  } catch (e) {
    const errorString = await streamToString(e.response.data)
    console.log(errorString)
  }
})()

function streamToString(stream) {
  const chunks = []
  return new Promise((resolve, reject) => {
    stream.on("data", (chunk) => chunks.push(Buffer.from(chunk)))
    stream.on("error", (err) => reject(err))
    stream.on("end", () => resolve(Buffer.concat(chunks).toString("utf8")))
  })
}

• .NET SDK — Chrome-based rendering for local files and live URLs.
• Mobile SDKs (Android and iOS) — Generate PDFs from HTML on-device.
• No-code (Zapier and Power Automate) — Convert templates and form submissions without code.

Features not available in open source libraries

• Form field conversion — HTML form elements become fillable PDF fields automatically
• Chained operations — Merge, watermark, and manipulate pages in a single API call
• Cross-platform consistency — Same rendering engine across web, iOS, Android, and server
• Enterprise support — SLAs, dedicated support, long-term maintenance
• Compliance — SOC 2 Type 2 audited, encryption, audit trails

html2pdf.js

html2pdf.js is a client-side library that works for prototypes and simple applications. It produces image-based output without text selection and can run into browser memory limits with large documents.

The html2pdf(opens in a new tab) library converts HTML pages to PDFs in the browser. It uses html2canvas(opens in a new tab) and jsPDF(opens in a new tab) under the hood. html2canvas renders an HTML page into a canvas element and turns it into a static image. jsPDF then takes the image and converts it to a PDF file.

Installation options

You can install html2pdf.js in three ways:

• CDN — Add a script tag to your HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>

• npm — npm install html2pdf.js
• Manual download — Grab the bundle from GitHub(opens in a new tab) and include it with a script tag

<script src="html2pdf.bundle.min.js"></script>

Convert HTML to PDF using html2pdf

Define a generatePDF() function to get the HTML element and convert it to PDF. Call this function from a download button:

1
<!DOCTYPE html>
2
<html>
10 collapsed lines
3
  <head>
4
    <!-- html2pdf CDN link -->
5
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
6
  </head>
7
  <body>
8
    <button id="download-button">Download as PDF</button>
9
    <div id="invoice">
10
      <h1>Our Invoice</h1>
11
    </div>
12

13
    <script>
14
      const button = document.getElementById("download-button");
15

16
      function generatePDF() {
17
        // Choose the element that your content will be rendered to.
18
        const element = document.getElementById("invoice");
19
        // Choose the element and save the PDF for your user.
20
        html2pdf().from(element).save();
21
      }
22

23
      button.addEventListener("click", generatePDF);
24
    </script>
25
  </body>
26
</html>

This example renders only the h1 element, but you can render any HTML element, including images and tables.

To test this example locally, run a quick static server with:

npx serve -l 4111 .

Then open http://localhost:4111(opens in a new tab) in your browser to interact with the PDF download button.

Open PDF in new tab (instead of downloading)

Sometimes you want to display the PDF in a new browser tab rather than trigger a download. Use outputPdf('blob') to get a Blob. Then create a URL:

function openPDFInNewTab() {
  const element = document.getElementById("invoice");
  html2pdf()
    .from(element)
    .outputPdf("blob")
    .then((blob) => {
      const url = URL.createObjectURL(blob);
      window.open(url, "_blank");
    });
}

This works well for previews or when users want to review before saving.

Advanced example: Downloading an invoice as a PDF

You can download an invoice template as a PDF by clicking this link. You can also generate the HTML for your own invoice on your backend if you prefer.

As in the previous example, the generatePDF() function downloads the invoice as a PDF. This time, the invoice template renders to the div element.

The end result will look like what’s shown below.

Common issues with html2pdf.js in production

jsPDF (standalone)

jsPDF(opens in a new tab) is the underlying library that html2pdf.js uses, but you can use it directly for more control. It’s ideal when you need to build PDFs programmatically with text, images, and shapes — without converting HTML.

Installation

npm install jspdf

Or via CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

Basic example with text and images

const { jsPDF } = window.jspdf;

function generatePDF() {
  const doc = new jsPDF();

  // Add text.
  doc.setFontSize(22);
  doc.text("Invoice", 20, 20);

  doc.setFontSize(12);
  doc.text("Date: February 6, 2026", 20, 35);
  doc.text("Total: $150.00", 20, 45);

  // Add a line.
  doc.setDrawColor(0);
  doc.line(20, 50, 190, 50);

  // Add items.
  doc.text("Item 1 - Widget", 20, 60);
  doc.text("$50.00", 170, 60, { align: "right" });

  doc.text("Item 2 - Gadget", 20, 70);
  doc.text("$100.00", 170, 70, { align: "right" });

  doc.save("invoice.pdf");
}

When to use jsPDF vs. html2pdf.js

pdfmake

pdfmake works well for data-driven documents and reports. It requires manual configuration and doesn’t accept HTML input — you define layouts in JavaScript objects instead.

The pdfmake(opens in a new tab) library generates PDF documents directly in the browser. It uses a layout and style configuration defined in a JSON-like structure within JavaScript. It’s built on pdfkit(opens in a new tab).

Unlike html2pdf.js, which converts HTML to an image first, pdfmake defines document structure in JavaScript, so text stays selectable.

Installation

Add via CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.12/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.12/vfs_fonts.min.js"></script>

Or, install via npm:

npm install pdfmake

Generate PDFs from HTML using pdfmake

Define a generatePDF() function with your PDF content as a JavaScript object. Use pdfmake to create and download the file. The example shows text and a table, but pdfmake also supports lists, images, and advanced styling.

1
<!DOCTYPE html>
2
<html>
12 collapsed lines
3
  <head>
4
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.12/pdfmake.min.js"></script>
5
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.12/vfs_fonts.min.js"></script>
6
  </head>
7
  <body>
8
    <button onclick="generatePDF()">Download Invoice</button>
9

10
    <!-- Move script here so pdfMake is loaded -->
11
    <script>
12
      function generatePDF() {
13
        const docDefinition = {
14
          content: [
15
            { text: "Invoice", style: "header" },
16
            {
17
              table: {
18
                body: [
19
                  ["Item", "Qty", "Price"],
20
                  ["Product 1", "2", "$10"],
21
                  ["Product 2", "1", "$20"],
22
                  ["Total", "", "$40"],
23
                ],
24
              },
25
            },
26
          ],
27
          styles: {
3 collapsed lines
28
            header: { fontSize: 18, bold: true },
29
          },
30
        };
31

32
        pdfMake.createPdf(docDefinition).download("invoice.pdf");
33
      }
34
    </script>
35
  </body>
36
</html>

You can test the example by running:

npx serve -l 4111 .

Benefits of using pdfmake

• Selectable text — Unlike html2pdf.js, pdfmake preserves text as selectable and copyable.
• Custom styling — Define font sizes, colors, and positioning with structured JavaScript.
• Advanced layouts — Supports tables, lists, and multicolumn designs.

Playwright

Playwright provides high-fidelity rendering with full CSS support. It requires server infrastructure and ongoing maintenance.

Playwright(opens in a new tab) controls headless Chrome, Firefox, and WebKit browsers to convert webpages into PDFs. Unlike html2pdf, Playwright runs on your server and generates PDFs server-side.

Installation

Create a new project and install Playwright(opens in a new tab):

mkdir playwright-pdf-generation && cd playwright-pdf-generation
npm init --yes
npm install playwright

Before using Playwright, make sure the required browser binaries are installed by running:

npx playwright install

Basic PDF example

Create an index.js file that requires Playwright, launches a browser session, goes to your invoice page, and saves the PDF file:

// Require Playwright.
const { chromium } = require("playwright");

(async function () {
  try {
    // Launch a new browser session.
    const browser = await chromium.launch();
    // Open a new page.
    const page = await browser.newPage();

    // Set the page content.
    await page.setContent("<h1>Our Invoice</h1>");

    // Generate a PDF and store it in a file named `invoice.pdf`.
    await page.pdf({ path: "invoice.pdf", format: "A4" });

    await browser.close();
  } catch (e) {
    console.error(e);
  }
})();

Running node index.js generates invoice.pdf locally. To let users download PDFs, set up a Node server with the http module. The server listens on /generate-pdf, renders the page with Playwright, and returns the PDF to the browser.

To do this, omit the path option in page.pdf() to get a buffer, set the response header to application/pdf, and send the buffer as the response. For all other routes, return a simple HTML page with a link to trigger the PDF download:

const { chromium } = require("playwright");
const http = require("http");

// Create an instance of the HTTP server to handle the request.
http
  .createServer(async (req, res) => {
    if (req.url === "/generate-pdf") {
      // Making sure to handle a specific endpoint.
      const browser = await chromium.launch();
      const page = await browser.newPage();

      // Set the content directly or navigate to an existing page.
      await page.setContent(`
      <!DOCTYPE html>
      <html>
      <head>
        <title>Invoice</title>
      </head>
      <body>
        <h1>Our Invoice</h1>
        <p>Details about the invoice...</p>
      </body>
      </html>
    `);

      // By removing the `path` option, you'll receive a `Buffer` from `page.pdf`.
      const buffer = await page.pdf({ format: "A4" });

      await browser.close();

      // Set the content type so the browser knows how to handle the response.
      res.writeHead(200, { "Content-Type": "application/pdf" });
      res.end(buffer);
    } else {
      // Respond with a simple instruction page.
      res.writeHead(200, { "Content-Type": "text/html" });
      res.end(
        '<h1>Welcome</h1><p>To generate a PDF, go to <a href="/generate-pdf">/generate-pdf</a>.</p>',
      );
    }
  })
  .listen(3000, () => {
    console.log("Server is running on http://localhost:3000");
  });

Open localhost:3000 in your browser to see the instruction page. Navigate to /generate-pdf to open the PDF with the invoice.

Common issues and troubleshooting

HTML to PDF library comparison

Feature	html2pdf.js	jsPDF	pdfmake	Playwright	Nutrient
Ease of use	Very easy	Easy	Moderate	Moderate	Easy
Installation	Simple (CDN, npm)	Simple (CDN, npm)	Simple (CDN, npm)	npm	SDK/API
Runs in browser
Text selection
CSS/HTML support	Limited	None	None	Full	Full
Customization	Low	High	High	High	High
PDF quality	Medium (image-based)	High (vector)	High (structured)	Very high (browser)	Very high (Chrome-based)
Best for	Quick HTML exports	Data-driven PDFs	JSON-based layouts	Complex CSS layouts	Production apps, compliance
Support	Community	Community	Community	Community	Enterprise SLA

Start your free trial to test Nutrient’s HTML-to-PDF conversion.

PDF-to-HTML conversion is coming soon to Document Engine and DWS API.

Which library should you use?

Choose based on your specific use case:

Decision flowchart:

1. Need fillable PDF forms? → Nutrient
2. Running on mobile? → Nutrient (iOS/Android SDKs)
3. Need full CSS support? → Playwright (self-hosted) or Nutrient (managed)
4. Building from data, not HTML? → jsPDF or pdfmake
5. Simple prototype? → html2pdf.js

Related posts

• How to convert HTML to PDF using React
• How to generate PDF reports from HTML in Node.js
• How to generate PDF reports from HTML in Python
• Top 10 ways to convert HTML to PDF
• HTML-to-PDF API guide

FAQ