html2pdf.js
Advanced tools
html2pdf.js is a JavaScript library that allows you to convert HTML content into PDF documents. It leverages the capabilities of jsPDF and html2canvas to generate high-quality PDFs directly from web pages.
Convert HTML to PDF
This feature allows you to convert a specific HTML element into a PDF document and save it. The code sample demonstrates how to select an HTML element with the ID 'content' and convert it to a PDF.
const element = document.getElementById('content');
html2pdf().from(element).save();Custom PDF Options
This feature allows you to customize various options for the PDF generation, such as margins, filename, image quality, and PDF format. The code sample demonstrates how to set these options and convert an HTML element to a PDF with the specified settings.
const element = document.getElementById('content');
const options = {
margin: 1,
filename: 'myfile.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
html2pdf().set(options).from(element).save();Add Content to PDF
This feature allows you to add custom content to the generated PDF. The code sample demonstrates how to add the text 'Additional content' at coordinates (10, 10) in the PDF before saving it.
const element = document.getElementById('content');
html2pdf().from(element).toPdf().get('pdf').then(function (pdf) {
pdf.text('Additional content', 10, 10);
pdf.save('custom.pdf');
});jsPDF is a popular library for generating PDF documents in JavaScript. It provides a wide range of functionalities for creating and manipulating PDFs, including text, images, and shapes. Compared to html2pdf.js, jsPDF offers more granular control over the PDF content but requires more manual setup for converting HTML to PDF.
pdfmake is a powerful library for creating PDF documents in JavaScript. It uses a declarative approach to define the PDF content and supports various features like tables, images, and styles. While pdfmake is more flexible and feature-rich than html2pdf.js, it does not directly convert HTML to PDF and requires defining the document structure programmatically.
Puppeteer is a Node.js library that provides a high-level API to control headless Chrome or Chromium browsers. It can be used to generate PDFs from web pages by rendering the HTML content in a headless browser and saving it as a PDF. Puppeteer offers more accurate rendering of complex web pages compared to html2pdf.js but requires a headless browser environment.
html2pdf.js converts any webpage or element into a printable PDF entirely client-side using html2canvas and jsPDF.
:warning: There have been several issues reported in v0.10. They are being investigated but in the meantime you may wish to remain on v0.9.3 ("^0.9.3" in npm, or use cdnjs for HTML script tags).
The simplest way to use html2pdf.js is to include it as a script in your HTML by using cdnjs:
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Using a CDN URL will lock you to a specific version, which should ensure stability and give you control over when to change versions. cdnjs gives you access to all past versions of html2pdf.js.
Note: Read about dependences for more information about using the unbundled version dist/html2canvas.min.js.
You may also download dist/html2pdf.bundle.min.js directly to your project folder and include it in your HTML with:
<script src="html2pdf.bundle.min.js"></script>
Install html2pdf.js and its dependencies using NPM with npm install --save html2pdf.js (make sure to include .js in the package name).
Note: You can use NPM to create your project, but html2pdf.js will not run in Node.js, it must be run in a browser.
Install html2pdf.js and its dependencies using Bower with bower install --save html2pdf.js (make sure to include .js in the package name).
If you're on a webpage that you can't modify directly and wish to use html2pdf.js to capture a screenshot, you can follow these steps:
function addScript(url) {
var script = document.createElement('script');
script.type = 'application/javascript';
script.src = url;
document.head.appendChild(script);
}
addScript('https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js');
html2pdf(document.body).Once installed, html2pdf.js is ready to use. The following command will generate a PDF of #element-to-print and prompt the user to save the result:
var element = document.getElementById('element-to-print');
html2pdf(element);
Every step of html2pdf.js is configurable, using its new Promise-based API. If html2pdf.js is called without arguments, it will return a Worker object:
var worker = html2pdf(); // Or: var worker = new html2pdf.Worker;
This worker has methods that can be chained sequentially, as each Promise resolves, and allows insertion of your own intermediate functions between steps. A prerequisite system allows you to skip over mandatory steps (like canvas creation) without any trouble:
// This will implicitly create the canvas and PDF objects before saving.
var worker = html2pdf().from(element).save();
The basic workflow of html2pdf.js tasks (enforced by the prereq system) is:
.from() -> .toContainer() -> .toCanvas() -> .toImg() -> .toPdf() -> .save()
| Method | Arguments | Description |
|---|---|---|
| from | src, type | Sets the source (HTML string or element) for the PDF. Optional type specifies other sources: 'string', 'element', 'canvas', or 'img'. |
| to | target | Converts the source to the specified target ('container', 'canvas', 'img', or 'pdf'). Each target also has its own toX method that can be called directly: toContainer(), toCanvas(), toImg(), and toPdf(). |
| output | type, options, src | Routes to the appropriate outputPdf or outputImg method based on specified src ('pdf' (default) or 'img'). |
| outputPdf | type, options | Sends type and options to the jsPDF object's output method, and returns the result as a Promise (use .then to access). See the jsPDF source code for more info. |
| outputImg | type, options | Returns the specified data type for the image as a Promise (use .then to access). Supported types: 'img', 'datauristring'/'dataurlstring', and 'datauri'/'dataurl'. |
| save | filename | Saves the PDF object with the optional filename (creates user download prompt). |
| set | opt | Sets the specified properties. See Options below for more details. |
| get | key, cbk | Returns the property specified in key, either as a Promise (use .then to access), or by calling cbk if provided. |
| then | onFulfilled, onRejected | Standard Promise method, with this re-bound to the Worker, and with added progress-tracking (see Progress below). Note that .then returns a Worker, which is a subclass of Promise. |
| thenCore | onFulFilled, onRejected | Standard Promise method, with this re-bound to the Worker (no progress-tracking). Note that .thenCore returns a Worker, which is a subclass of Promise. |
| thenExternal | onFulfilled, onRejected | True Promise method. Using this 'exits' the Worker chain - you will not be able to continue chaining Worker methods after .thenExternal. |
| catch, catchExternal | onRejected | Standard Promise method. catchExternal exits the Worker chain - you will not be able to continue chaining Worker methods after .catchExternal. |
| error | msg | Throws an error in the Worker's Promise chain. |
A few aliases are also provided for convenience:
| Method | Alias |
|---|---|
| save | saveAs |
| set | using |
| output | export |
| then | run |
html2pdf.js can be configured using an optional opt parameter:
var element = document.getElementById('element-to-print');
var opt = {
margin: 1,
filename: 'myfile.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
// New Promise-based usage:
html2pdf().set(opt).from(element).save();
// Old monolithic-style usage:
html2pdf(element, opt);
The opt parameter has the following optional fields:
| Name | Type | Default | Description |
|---|---|---|---|
| margin | number or array | 0 | PDF margin (in jsPDF units). Can be a single number, [vMargin, hMargin], or [top, left, bottom, right]. |
| filename | string | 'file.pdf' | The default filename of the exported PDF. |
| pagebreak | object | {mode: ['css', 'legacy']} | Controls the pagebreak behaviour on the page. See Page-breaks below. |
| image | object | {type: 'jpeg', quality: 0.95} | The image type and quality used to generate the PDF. See Image type and quality below. |
| enableLinks | boolean | true | If enabled, PDF hyperlinks are automatically added ontop of all anchor tags. |
| html2canvas | object | { } | Configuration options sent directly to html2canvas (see here for usage). |
| jsPDF | object | { } | Configuration options sent directly to jsPDF (see here for usage). |
html2pdf.js has the ability to automatically add page-breaks to clean up your document. Page-breaks can be added by CSS styles, set on individual elements using selectors, or avoided from breaking inside all elements (avoid-all mode).
By default, html2pdf.js will respect most CSS break-before, break-after, and break-inside rules, and also add page-breaks after any element with class html2pdf__page-break (for legacy purposes).
| Setting | Type | Default | Description |
|---|---|---|---|
| mode | string or array | ['css', 'legacy'] | The mode(s) on which to automatically add page-breaks. One or more of 'avoid-all', 'css', and 'legacy'. |
| before | string or array | [] | CSS selectors for which to add page-breaks before each element. Can be a specific element with an ID ('#myID'), all elements of a type (e.g. 'img'), all of a class ('.myClass'), or even '*' to match every element. |
| after | string or array | [] | Like 'before', but adds a page-break immediately after the element. |
| avoid | string or array | [] | Like 'before', but avoids page-breaks on these elements. You can enable this feature on every element using the 'avoid-all' mode. |
| Mode | Description |
|---|---|
| avoid-all | Automatically adds page-breaks to avoid splitting any elements across pages. |
| css | Adds page-breaks according to the CSS break-before, break-after, and break-inside properties. Only recognizes always/left/right for before/after, and avoid for inside. |
| legacy | Adds page-breaks after elements with class html2pdf__page-break. This feature may be removed in the future. |
// Avoid page-breaks on all elements, and add one before #page2el.
html2pdf().set({
pagebreak: { mode: 'avoid-all', before: '#page2el' }
});
// Enable all 'modes', with no explicit elements.
html2pdf().set({
pagebreak: { mode: ['avoid-all', 'css', 'legacy'] }
});
// No modes, only explicit elements.
html2pdf().set({
pagebreak: { before: '.beforeClass', after: ['#after1', '#after2'], avoid: 'img' }
});
You may customize the image type and quality exported from the canvas by setting the image option. This must be an object with the following fields:
| Name | Type | Default | Description |
|---|---|---|---|
| type | string | 'jpeg' | The image type. HTMLCanvasElement only supports 'png', 'jpeg', and 'webp' (on Chrome). |
| quality | number | 0.95 | The image quality, from 0 to 1. This setting is only used for jpeg/webp (not png). |
These options are limited to the available settings for HTMLCanvasElement.toDataURL(), which ignores quality settings for 'png' images. To enable png image compression, try using the canvas-png-compression shim, which should be an in-place solution to enable png compression via the quality option.
The Worker object returned by html2pdf() has a built-in progress-tracking mechanism. It will be updated to allow a progress callback that will be called with each update, however it is currently a work-in-progress.
html2pdf.js depends on the external packages html2canvas, jsPDF, and es6-promise. These dependencies are automatically loaded when using NPM or the bundled package.
If using the unbundled dist/html2pdf.min.js (or its un-minified version), you must also include each dependency. Order is important, otherwise html2canvas will be overridden by jsPDF's own internal implementation:
<script src="es6-promise.auto.min.js"></script>
<script src="jspdf.min.js"></script>
<script src="html2canvas.min.js"></script>
<script src="html2pdf.min.js"></script>
When submitting an issue, please provide reproducible code that highlights the issue, preferably by creating a fork of this template jsFiddle (which has html2pdf.js already loaded). Remember that html2pdf.js uses html2canvas and jsPDF as dependencies, so it's a good idea to check each of those repositories' issue trackers to see if your problem has already been addressed.
Rendering: The rendering engine html2canvas isn't perfect (though it's pretty good!). If html2canvas isn't rendering your content correctly, I can't fix it.
Node cloning (CSS etc): The way html2pdf.js clones your content before sending to html2canvas is buggy. A fix is currently being developed - try out:
dist/html2pdf.bundle.js)npm install eKoopmans/html2pdf.js#bugfix/clone-nodes-BUILDResizing: Currently, html2pdf.js resizes the root element to fit onto a PDF page (causing internal content to "reflow").
Rendered as image: html2pdf.js renders all content into an image, then places that image into a PDF.
Promise clashes: html2pdf.js relies on specific Promise behaviour, and can fail when used with custom Promise libraries.
Maximum size: HTML5 canvases have a maximum height/width. Anything larger will fail to render.
html2pdf.js is currently sorely lacking in unit tests. Any contributions or suggestions of automated (or manual) tests are welcome. This is high on the to-do list for this project.
If you want to create a new feature or bugfix, please feel free to fork and submit a pull request! Create a fork, branch off of main, and make changes to the /src/ files (rather than directly to /dist/). You can test your changes by rebuilding with npm run build.
Copyright (c) 2017-2019 Erik Koopmans <http://www.erik-koopmans.com/>
FAQs
Client-side HTML-to-PDF rendering using pure JS
The npm package html2pdf.js receives a total of 154,631 weekly downloads. As such, html2pdf.js popularity was classified as popular.
We found that html2pdf.js demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Malicious Go packages are impersonating popular libraries to install hidden loader malware on Linux and macOS, targeting developers with obfuscated payloads.
Security News
Bybit's $1.46B hack by North Korea's Lazarus Group pushes 2025 crypto losses to $1.6B in just two months, already surpassing all of 2024's $1.49B total.
Security News
OpenSSF has published OSPS Baseline, an initiative designed to establish a minimum set of security-related best practices for open source software projects.