eKoopmans / html2pdf.js

html2pdf.js html2pdf.js converts any webpage or element into a printable PDF entirely client-side using html2canvas and jsPDF. Table of contents • Getting started • CDN • Raw JS • NPM • Bower • Console • Usage • Advanced usage • Workflow • Worker API • Options • Page-breaks • Page-break settings • Page-break modes • Example usage • Image type and quality • Progress tracking • Dependencies • Contributing • Issues • Tests • Pull requests • 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: 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 .* Raw JS You may also download directly to your project folder and include it in your HTML with: NPM Install html2pdf.js and its dependencies using NPM with (make sure to include 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 (make sure to include 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: • You may now execute html2pdf.js commands directly from the console. To capture a default PDF of the entire page, use . Usage Once installed, html2pdf.js is ready to use. The following command will generate a PDF of and prompt the user to save the result: 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 object: 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: Workflow The basic workflow of html2pdf.js tasks (enforced by the prereq system) is: Worker API | Method | Arguments | Description | |--------------|--------------------|-------------| | from | src, type | Sets the source (HTML string or element) for the PDF. Optional specifies other sources: , , , or . | | to | target | Converts the source to the specified target ( , , , or ). Each target also has its own method that can be called directly: , , , and . | | output | type, options, src | Routes to the appropriate or method based on specified ( (default) or ). | | outputPdf | type, options | Sends and to the jsPDF object's method, and returns the result as a Promise (use 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 to access). Supported types: , / , and / . | | 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 , either as a Promise (use to access), or by calling if provided. | | then | onFulfilled, onRejected | Standard Promise method, with re-bound to the Worker, and with added progress-tracking (see Progress below). Note that returns a , which is a subclass of Promise. | | thenCore | onFulFilled, onRejected | Standard Promise method, with re-bound to the Worker (no progress-tracking). Note that returns a , 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 . | | catch, catchExternal | onRejected | Standard Promise method. exits the Worker chain - you will not be able to continue chaining Worker methods after . | | 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 parameter: The parameter has the following optional fields: |Name |Type |Default |Description | |------------|----------------|--------------------------------|------------------------------------------------------------------------------------------------------------| |margin |number or array | |PDF margin (in jsPDF units). Can be a single number, , or . | |filename |string | |The default filename of the exported PDF. | |pagebreak |object | |Controls the pagebreak behaviour on the page. See Page-breaks below. | |image |object | |The image type and quality used to generate the PDF. See Image type and quality below.| |enableLinks |boolean | |If enabled, PDF hyperlinks are automatically added ontop of all anchor tags. | |html2canvas |object | |Configuration options sent directly to (see here for usage).| |jsPDF |object | |Configuration options sent directly to (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 ( mode). By default, html2pdf.js will respect most CSS , , and rules, and also add page-breaks after any element with class (for legacy purposes). Page-break settings |Setting |Type |Default |Description | |----------|----------------|--------------------|------------| |mode |string or array | |The mode(s) on which to automatically add page-breaks. One or more of , , and . | |before |string or array | |CSS selectors for which to add page-breaks before each element. Can be a…