Generate Multi‑Page PDFs Directly in the Browser with dompdf.js

Overview

dompdf.js is a front‑end library that converts HTML to editable, searchable PDF files directly in the browser. Version 1.1.0 adds a pagination engine that can split a document into multiple pages, supporting thousands of pages with a single option.

Installation

Install via npm or load from a CDN.

npm install dompdf.js --save

<script src="https://cdn.jsdelivr.net/npm/dompdf.js@latest/dist/dompdf.js"></script>

Basic Usage

import dompdf from "dompdf.js";

dompdf(document.querySelector("#capture"), {
  pagination: true,
  format: "a4"
})
.then(blob => {
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = "example.pdf";
  document.body.appendChild(a);
  a.click();
})
.catch(err => console.error(err));

Key Features

Precise Pagination

The engine parses the HTML into a DOM tree that records each element’s bounds (top, left, width, height) and style information. It walks the tree recursively; when bounds.top + bounds.height exceeds the target page height (e.g., A4 1123 px), the element is moved to a new page and its coordinates are reset. After splitting, jspdf.addPage() creates new pages and the library renders each element with jspdf.text or jspdf.image.

{
  bounds: {height: 1303.6875, left: 8, top: -298.5625, width: 1273},
  elements: [
    {
      bounds: {left: 8, top: -298.5625, width: 1273, height: 1303.6875},
      elements: [/* … */]
    }
  ]
}

jspdf.text("This is a text node", 1115, 8);
jspdf.image(img, x, y, width, height);

Header & Footer Customisation

Use the pageConfig option to define header and footer objects. Each object can specify content, height, contentColor, contentFontSize, contentPosition (e.g., "center", "leftTop", or [x,y]), and padding.

PDF Encryption & Compression

The encryption object allows setting userPassword, ownerPassword, and userPermissions (e.g., ["print","modify","copy","annot-forms"]). The boolean compress flag enables PDF stream compression.

Non‑Latin Font Support

jsPDF renders only Latin glyphs. To display Chinese, Japanese, etc., import a custom TrueType font as a Base64 string and pass it via fontConfig:

<script src="./SourceHanSansSC-Normal-Min-normal.js"></script>
<script>
  dompdf(document.querySelector('#capture'), {
    useCORS: true,
    fontConfig: {
      fontFamily: 'SourceHanSansSC-Normal-Min',
      fontBase64: window.fontBase64
    },
    pagination: true
  });
</script>

Rendering Complex Styles (foreignObjectRendering)

Elements that cannot be drawn directly (gradients, shadows, complex tables) can be marked with the foreignObjectRendering attribute. The library rasterises the element via an SVG foreignObject and embeds it as an image. This increases PDF size and is supported in Chrome, Firefox, Edge (not IE).

<div style="width:100px;height:100px;" foreignObjectRendering>
  <div style="width:50px;height:50px;border:1px solid #000;box-shadow:2px 2px 5px rgba(0,0,0,0.3);background:linear-gradient(45deg,#ff6b6b,#4ecdc4);">
    This is a div element
  </div>
</div>

Pagination Control – divisionDisable

Adding the attribute divisionDisable to an element prevents it from being split across pages; the whole element is moved to the next page.

<img src="..." alt="PDF Generation Example" crossorigin="anonymous" divisionDisable />

Configuration Options

useCORS (boolean, default false) – Enable loading of cross‑origin resources.

backgroundColor (string|null, default auto) – Page background color; null yields transparency.

fontConfig (object) – Custom font definition ( fontFamily, fontBase64).

encryption (object) – PDF password protection.

precision (number, default 16) – Positioning precision for element placement.

compress (boolean, default false) – Enable PDF compression.

putOnlyUsedFonts (boolean, default false) – Embed only fonts that appear in the document.

pagination (boolean, default false) – Turn on multi‑page rendering.

format (string, default 'a4') – Page size (supports a0–a10, b0–b10, c0–c10, letter, etc.).

pageConfig (object) – Header/footer configuration.

Browser Compatibility

Works in browsers that support Promise (or a polyfill): Firefox 3.5+, Chrome, Opera 12+, IE 9+, Safari 6+.

Repository & Demo

https://github.com/lmn1919/dompdf.js

https://gitee.com/liu-facai/dompdf.js

Online demo: https://dompdfjs.lisky.com.cn