Client-Side PDF Generation from HTML and Programmatic Content in Web Applications
html-pdf, html2pdf.js, jsPDF, and pdfmake are JavaScript libraries used to generate PDF documents in web applications, but they differ significantly in architecture, capabilities, and runtime environments. html-pdf is a Node.js-only package that converts HTML to PDF using PhantomJS and has been deprecated. html2pdf.js runs in the browser and captures DOM elements as PDFs using a combination of html2canvas and jsPDF. jsPDF is a low-level PDF creation library that works in both browser and Node.js environments, allowing programmatic drawing of text, images, and shapes without relying on HTML. pdfmake offers a declarative, document-definition-based approach to PDF generation with strong support for layouts, tables, and styling, and runs in both browser and Node.js contexts.
Npm Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Comparing PDF Generation Libraries: html-pdf, html2pdf.js, jsPDF, and pdfmake
Generating PDFs in web applications is a common requirement — whether for invoices, reports, or printable summaries. But the right tool depends heavily on your input source (HTML vs. structured data), runtime (browser vs. Node.js), and quality expectations. Let’s examine how these four libraries handle real-world scenarios.
⚠️ html-pdf: Deprecated and Node-Only
html-pdf was a popular Node.js package that used PhantomJS to render HTML into PDFs. It is now officially deprecated — both on npm and GitHub — and PhantomJS itself is no longer maintained. This means security vulnerabilities won’t be patched, and modern CSS (Flexbox, Grid, etc.) won’t render correctly.
It only works in Node.js, cannot run in the browser, and requires a headless browser environment. For these reasons, do not use html-pdf in new projects.
// html-pdf: Deprecated usage (Node.js only)
const pdf = require('html-pdf');
const html = '<h1>Hello World</h1>';
pdf.create(html).toFile('./output.pdf', (err, res) => {
if (err) return console.log(err);
console.log(res.filename);
});
💡 Migration path: Use Puppeteer or Playwright in Node.js for modern, reliable HTML-to-PDF conversion.
🖼️ html2pdf.js: Browser-Based HTML Snapshot
html2pdf.js runs entirely in the browser and is designed to convert any DOM element into a PDF. It combines two tools under the hood:
- html2canvas: Renders HTML elements to a
<canvas>(rasterizing text and layout) - jsPDF: Converts that canvas into a PDF
This means the output is pixel-based, not vector text. Zooming in may reveal blurry text, and file sizes can be large. However, it’s incredibly easy to use for capturing visual snapshots of UI components.
// html2pdf.js: Convert a DOM element to PDF
import html2pdf from 'html2pdf.js';
const element = document.getElementById('invoice');
html2pdf().from(element).save();
You can add options for margins, filename, or page size:
html2pdf()
.set({ margin: 10, filename: 'report.pdf', image: { type: 'jpeg', quality: 0.95 } })
.from(element)
.save();
✅ Use when: You need a quick “print this page” button that mirrors the browser-rendered look.
❌ Avoid when: You need searchable text, small file size, or precise typography.
✍️ jsPDF: Low-Level PDF Builder
jsPDF gives you a programmatic API to draw PDFs from scratch. It doesn’t understand HTML or CSS — you position text, images, and shapes using coordinates. This gives you full control but requires manual layout logic.
It works in both browser and Node.js (with canvas polyfills or image support via plugins) and generates vector-based, text-searchable PDFs.
// jsPDF: Create a PDF from code
import { jsPDF } from 'jspdf';
const doc = new jsPDF();
doc.setFontSize(22);
doc.text('Hello world!', 20, 20);
doc.save('output.pdf');
Adding an image requires preloading it:
const img = new Image();
img.src = '/logo.png';
img.onload = () => {
doc.addImage(img, 'PNG', 15, 40, 180, 160);
doc.save('with-image.pdf');
};
For tables or page breaks, you’ll need helper libraries like jspdf-autotable. Without them, layout is entirely manual.
✅ Use when: You’re generating simple, data-driven documents (e.g., shipping labels, certificates) and can define layout in code.
❌ Avoid when: You need to replicate complex HTML layouts or want automatic pagination.
📐 pdfmake: Declarative Document Definitions
pdfmake uses a JSON-like document definition to describe PDF structure. You define content as an array of objects (text, tables, images, columns), and pdfmake handles layout, pagination, headers, footers, and styling automatically.
It supports vector text, tables with row spanning, page breaks, headers/footers, and custom fonts. Output is clean, searchable, and small in size.
// pdfmake: Declarative PDF
import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts.pdfMake.vfs;
const docDefinition = {
content: [
{ text: 'Invoice', style: 'header' },
{ text: 'Customer: John Doe' },
{
table: {
body: [
['Item', 'Price'],
['Widget', '$10'],
['Gadget', '$20']
]
}
}
],
styles: {
header: { fontSize: 18, bold: true }
}
};
pdfMake.createPdf(docDefinition).download('invoice.pdf');
It also supports dynamic page headers/footers:
const docDefinition = {
header: () => 'My Company',
footer: (currentPage, pageCount) => `Page ${currentPage} of ${pageCount}`,
content: [/* ... */]
};
✅ Use when: You need professional, print-ready documents with tables, consistent styling, and automatic pagination.
❌ Avoid when: Your source is raw HTML you can’t convert to structured data.
🔁 Input Source: HTML vs. Structured Data
This is the core architectural divide:
| Library | Input Type | Rendering Method |
|---|---|---|
html-pdf | HTML (Node.js) | PhantomJS (deprecated) |
html2pdf.js | DOM Element | Rasterized canvas |
jsPDF | Code (primitives) | Vector drawing |
pdfmake | JSON definition | Vector layout engine |
If your content lives as HTML in the DOM and you need a visual snapshot → html2pdf.js.
If you have structured data (e.g., API response) and need a polished PDF → pdfmake.
If you need pixel-perfect control over coordinates → jsPDF.
🌐 Runtime Environment
- Browser only:
html2pdf.js(by design) - Browser + Node.js:
jsPDF,pdfmake(with minor setup in Node) - Node.js only (deprecated):
html-pdf
Note: While jsPDF and pdfmake support Node.js, they don’t render HTML — they generate PDFs from code or definitions.
📄 Quality and File Size
html2pdf.jsproduces larger files because content is embedded as images.jsPDFandpdfmakeproduce small, text-based PDFs that are searchable and scalable.html-pdfoutput quality depends on PhantomJS, which lacks modern rendering capabilities.
🧩 Summary: When to Use Which
| Scenario | Recommended Library |
|---|---|
| Convert on-screen DOM to PDF (e.g., “Export as PDF” button) | html2pdf.js |
| Generate invoices, contracts, or reports from JSON data | pdfmake |
| Create simple, code-defined PDFs (labels, certificates) | jsPDF |
| Node.js HTML-to-PDF (new project) | Not these — use Puppeteer |
| Node.js HTML-to-PDF (legacy project) | Migrate away from html-pdf |
🚫 Final Word on html-pdf
html-pdf should not be used in any new project. Its reliance on PhantomJS makes it obsolete, insecure, and incompatible with modern web standards. Replace it with headless Chrome via Puppeteer if you need server-side HTML-to-PDF.
For client-side needs, choose between html2pdf.js (for visual fidelity to DOM) and pdfmake/jsPDF (for structured, high-quality documents).
How to Choose: pdfmake vs html2pdf.js vs html-pdf vs jspdf
- pdfmake:
Choose
pdfmakewhen you need to build structured, print-ready PDFs with complex layouts (e.g., tables, headers, footers, columns) using a clean, declarative API. It excels in applications that generate invoices, contracts, or reports from structured data rather than raw HTML, and supports both browser and server-side rendering without rasterization. - html2pdf.js:
Choose
html2pdf.jswhen you need to convert existing HTML markup (e.g., a report, invoice, or dashboard) into a PDF directly in the browser with minimal setup. It’s ideal for capturing styled DOM elements as they appear visually, but be aware it uses rasterization (via html2canvas) for complex CSS, which may affect text quality and file size. - html-pdf:
Do not use
html-pdfin new projects — it is officially deprecated and relies on the unmaintained PhantomJS. It only works in Node.js and is unsuitable for client-side PDF generation. Existing projects should migrate to alternatives like Puppeteer or a modern browser-based solution. - jspdf:
Choose
jsPDFwhen you need fine-grained control over PDF content and are generating documents programmatically rather than from HTML. It’s well-suited for simple reports, labels, or forms where layout can be built with code. However, it lacks native support for HTML/CSS rendering and advanced layout features like tables or page breaks without plugins.
Popular Comparisons
README for pdfmake
pdfmake 
PDF document generation library for server-side and client-side in pure JavaScript.
Check out the playground and examples.
Features
- line-wrapping,
- text-alignments (left, right, centered, justified),
- numbered and bulleted lists,
- tables and columns
- auto/fixed/star-sized widths,
- col-spans and row-spans,
- headers automatically repeated in case of a page-break,
- snaking columns (newspaper-style layout where content flows column-to-column),
- images and vector graphics,
- convenient styling and style inheritance,
- page headers and footers:
- static or dynamic content,
- access to current page number and page count,
- background-layer,
- page dimensions and orientations,
- margins,
- document sections,
- custom page breaks,
- font embedding,
- support for complex, multi-level (nested) structures,
- table of contents,
- helper methods for opening/printing/downloading the generated PDF,
- setting of PDF metadata (e.g. author, subject).
Documentation
Documentation URL: https://pdfmake.github.io/docs/
Source of documentation: https://github.com/pdfmake/docs Improvements are welcome!
Building from sources
using npm:
git clone https://github.com/bpampuch/pdfmake.git
cd pdfmake
npm install
npm run build
using yarn:
git clone https://github.com/bpampuch/pdfmake.git
cd pdfmake
yarn
yarn run build
License
MIT
Authors
pdfmake is based on a truly amazing library pdfkit (credits to @devongovett).
Thanks to all contributors.