html2pdf.js

html2pdf.js converts any webpage or element into a printable PDF entirely client-side using html2canvas and jsPDF.

Getting started
- CDN
- Raw JS
- NPM
- Bower
- Console
Usage
- Advanced usage
  - Workflow
  - Worker API
Options
- Page-breaks
- Image type and quality
Progress tracking
Dependencies
Contributing
Credits
License

Getting started

CDN

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 dependencies for more information about using the unbundled version dist/html2canvas.min.js.

Raw 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>

NPM

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.

Bower

Install html2pdf.js and its dependencies using Bower with bower install --save html2pdf.js (make sure to include .js in the package name).

Console

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:

Open your browser's console (instructions for different browsers here).

Paste in this code:

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');

You may now execute html2pdf.js commands directly from the console. To capture a default PDF of the entire page, use html2pdf(document.body).

Usage

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);

Advanced usage

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();

Workflow

The basic workflow of html2pdf.js tasks (enforced by the prereq system) is:

.from() -> .toContainer() -> .toCanvas() -> .toImg() -> .toPdf() -> .save()

Worker API

| 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 |

Options

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).|

Page-breaks

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).

Page-break settings

|Setting |Type |Default |Description | |----------|----------------|--------------------|------------| |mode |string or array |['css', 'legacy'] |The mode(s) on which to automatically add page-breaks. One or more of

Html2pdf.js

Install / Use

README