html2pdf.js Documentation

If you are using the unbundled dist/html2pdf.min.js (or the un-minified version) instead of NPM, you must manually include jsPDF and html2canvas. The order of inclusion is critical to prevent html2canvas from being overridden by jsPDF's internal implementation.

<script src="jspdf.min.js"></script>
<script src="html2canvas.min.js"></script>
<script src="html2pdf.min.js"></script>

If you cannot modify a webpage directly, you can inject html2pdf.js via the browser console to capture a PDF of the page:

1. Open the browser console.
2. Paste and run the following code to load the library:

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

3. Execute the capture command:

html2pdf(document.body);

You can integrate html2pdf.js into your project using several methods:

CDN

Include the bundled script in your HTML via 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>

NPM

Install via npm. Note that html2pdf.js must be run in a browser and will not run in Node.js:

npm install --save html2pdf.js

Bower

Install via Bower:

bower install --save html2pdf.js

Raw JS

Download dist/html2pdf.bundle.min.js directly and include it:

<script src="html2pdf.bundle.min.js"></script>

To customize the image type and quality exported from the canvas, use the image option. This is useful for controlling the balance between PDF file size and visual clarity.

Supported Types:

• png (Note: quality setting is ignored for png unless using a compression shim).
• jpeg (Supports quality from 0 to 1).
• webp (Supported on Chrome; supports quality from 0 to 1).

var opt = {
  image: { type: 'jpeg', quality: 0.98 }
};

You can configure html2pdf.js using an opt object. The library supports two usage styles: a modern Promise-based API and an older monolithic style.

Promise-based usage (Recommended):

html2pdf().set(opt).from(element).save();

Monolithic-style usage:

html2pdf(element, opt);

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

To quickly generate a PDF of a specific DOM element and prompt the user to save it, pass the element to the html2pdf() function.

var element = document.getElementById('element-to-print');
html2pdf(element);

For fine-grained control, call html2pdf() without arguments to receive a Worker object. The Worker uses a Promise-based API that allows you to chain tasks sequentially.

Standard Workflow: .from() -> .toContainer() -> .toCanvas() -> .toImg() -> .toPdf() -> .save()

Example of implicit workflow:

var worker = html2pdf().from(element).save();

The opt object passed to html2pdf(src, opt) or .set(opt) allows you to configure the generation process. The following top-level keys are supported:

• margin: Sets the page margins.
• filename: The name of the generated PDF file.
• image: An object containing type and quality for the image conversion.
• html2canvas: Options passed directly to the html2canvas library.
• jspdf: Options passed directly to the jsPDF library.

The image configuration object contains 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). |