html2pdf

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

Install

1. Copy html2pdf.js to your project directory.
2. Fetch the dependencies html2canvas and jsPDF, which can be found in the vendor folder.
3. Include the files in your HTML document (order is important, otherwise jsPDF will override html2canvas with its own internal implementation):

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

Note: For best results, use the custom builds of html2canvas and jsPDF found in the vendor folder, which contain added features and hotfixes.

Usage

Basic usage

Including html2pdf exposes the html2pdf function. Calling it will create a PDF and prompt the user to save the file:

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

The PDF can be configured using an optional opt parameter:

var element = document.getElementById('element-to-print');
html2pdf(element, {
  margin:       1,
  filename:     'myfile.pdf',
  image:        { type: 'jpeg', quality: 0.98 },
  html2canvas:  { dpi: 192, letterRendering: true },
  jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
});

The opt parameter has the following optional fields:

Name	Type	Default	Description
margin	number or array	1	PDF margin. Array can be either [vMargin, hMargin] or [top, left, bottom, right].
filename	string	'file.pdf'	The default filename of the exported PDF.
image	object	{type: 'jpeg', quality: 0.95}	The image type used to generate the PDF. It must have two fields: 'type', the image type ('jpeg'/'png'); and 'quality', the image quality (0-1). See here for more info (do not include 'image/' in the 'type' field).
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.

Extra features

Page-breaks

You may add html2pdf-specific page-breaks to your document by adding the CSS class html2pdf__page-break to any element (normally an empty div). During PDF creation, these elements will be given a height calculated to fill the remainder of the PDF page that they are on. Example usage:

<div id="element-to-print">
  <span>I'm on page 1!</span>
  <div class="html2pdf__page-break"></div>
  <span>I'm on page 2!</span>
</div>

Dependencies

html2pdf depends on the external packages html2canvas and jsPDF.

For best results, use this custom build of html2canvas, which adds support for box-shadows and custom resolutions (via the dpi/scale options), and this build of jsPDF, which contains a hotfix for hyperlinks.

Credits

Erik Koopmans

License

The MIT License

Copyright (c) 2017 Erik Koopmans <http://www.erik-koopmans.com/>