dompdf.js

English | 中文

<!-- [Home](https://html2canvas.hertzen.com) | [Downloads](https://github.com/niklasvh/html2canvas/releases) | [Questions](https://github.com/niklasvh/html2canvas/discussions/categories/q-a) [](https://gitter.im/niklasvh/html2canvas?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)  [](https://www.npmjs.org/package/html2canvas) [](https://www.npmjs.org/package/html2canvas) -->

This script allows you to generate editable, non-image, printable vector PDFs directly on the user's browser from web pages or parts of web pages. It supports pagination and can generate PDF files with thousands of pages. Since the generation is based on the DOM, the result may not be 100% consistent with the actual appearance. It is not recommended for complex PDF generation requirements.

Live Demo: Online Demo

PDF Generation Example

🛠️ How it works

This script is based on html2canvas and jspdf. Unlike traditional methods that render HTML pages to images via html2canvas and then generate PDF files from images via jspdf, this script modifies the canvas-renderer file of html2canvas by reading the DOM and styles applied to elements, and calls jspdf methods to generate PDF files. Therefore, it has the following advantages:

1. No server-side rendering is required because the entire PDF is created on the client-side browser.
2. It generates real PDF files, not image-based ones, so the quality of the generated PDF is higher, and you can edit and print the generated PDF files.
3. Smaller PDF file size.
4. Not limited by canvas rendering height, allowing for the generation of PDF files with thousands of pages.

Of course, it also has some disadvantages:

1. Since it is based on the DOM, it may not be 100% consistent with the actual appearance.
2. Some CSS properties are not yet supported. See Supported CSS Properties.

Implemented Features

| Feature | Status | Description | | :----------------- | :----- | :------------------------------------------------------------------------------------------------------------------------------------------------------- | | Pagination | ✅ | Supports PDF pagination rendering, capable of generating PDF files with thousands of pages | | Text Rendering | ✅ | Supports basic text content rendering, font-family, font-size, font-style, font-variant, color, etc., supports text stroke, does not support text shadow | | Image Rendering | ✅ | Supports web images, base64 images, svg images | | Borders | ✅ | Supports border-width, border-color, border-style, border-radius, currently only solid borders are implemented | | Background | ✅ | Supports background color, background image, background gradient | | Canvas | ✅ | Supports rendering canvas | | SVG | ✅ | Supports rendering svg | | Shadow Rendering | ✅ | Uses foreignObjectRendering, supports border shadow rendering | | Gradient Rendering | ✅ | Uses foreignObjectRendering, supports background gradient rendering | | Iframe | ❌ | Does not support rendering iframe yet |

Usage

The dompdf library uses Promise and expects them to be available in the global context. If you wish to support older browsers that do not natively support Promise, please include a polyfill, such as es6-promise, before importing dompdf.

Installation:

 npm install dompdf.js --save

CDN Import:

<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'), options)
    .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);
    });

PDF Pagination Rendering

By default, dompdf renders the entire document onto a single page.

You can enable pagination rendering by setting the pagination option to true. Customize header and footer size, content, font color/size, position, etc., via the pageConfig field.

_ Note: Please ensure that the DOM node to be generated as PDF is set to the corresponding page width (px). For example, set the width to 794px for A4. Here is the page size reference table: page_sizes.md _

import dompdf from 'dompdf.js';

dompdf(document.querySelector('#capture'), {
    pagination: true,
    format: 'a4',
    pageConfig: {
        header: {
            content: 'This is the header',
            height: 50,
            contentColor: '#333333',
            contentFontSize: 12,
            contentPosition: 'center',
            padding: [0, 0, 0, 0]
        },
        footer: {
            content: 'Page ${currentPage} of ${totalPages}',
            height: 50,
            contentColor: '#333333',
            contentFontSize: 12,
            contentPosition: 'center',
            padding: [0, 0, 0, 0]
        }
    }
})
    .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);
    });

Precise Pagination Control - divisionDisable Attribute

If you do not want a container to be split during pagination, add the divisionDisable attribute to that element, and it will be moved to the next page entirely when crossing pages.

⚙️ options Parameters

| Parameter | Required | Default | Type | Description | | :----------------- | :------- | :--------- | :----------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | useCORS | No | false | boolean | Allow cross-origin resources (requires server-side CORS configuration) | | backgroundColor | No | Auto/White | string \| null | Override page background color; pass null to generate transparent background | | fontConfig | No | - | object \| Array | Non-English font configuration, see table below | | encryption | No | Empty | object | PDF encryption configuration. Property userPassword is used for the user password under the given permission list; property ownerPassword needs userPassword and ownerPassword to be set for correct authentication; property userPermissions is used to specify user permissions, optional values are ['print', 'modify', 'copy', 'annot-forms'] | | precision | No | 16 | number | Element position precision