You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+64-6Lines changed: 64 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -33,19 +33,75 @@ var element = document.getElementById('element-to-print');
33
33
html2pdf(element);
34
34
```
35
35
36
+
### Advanced usage
37
+
38
+
Every step of html2pdf is configurable, using its new Promise-based API. If html2pdf is called without arguments, it will return a `Worker` object:
39
+
40
+
```js
41
+
var worker =html2pdf(); // Or: var worker = new html2pdf.Worker;
42
+
```
43
+
44
+
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:
45
+
46
+
```js
47
+
// This will implicitly create the canvas and PDF objects before saving.
48
+
var worker =html2pdf().from(element).save();
49
+
```
50
+
51
+
#### Workflow
52
+
53
+
The basic workflow of html2pdf tasks (enforced by the prereq system) is:
| from | src, type | Sets the source (HTML string or element) for the PDF. Optional `type` specifies other sources: `'string'`, `'element'`, `'canvas'`, or `'img'`. |
64
+
| 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()`. |
65
+
| output | type, options, src | Routes to the appropriate `outputPdf` or `outputImg` method based on specified `src` (`'pdf'` (default) or `'img'`). |
66
+
| 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](https://rawgit.com/MrRio/jsPDF/master/docs/jspdf.js.html#line992) for more info. |
67
+
| 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'`. |
68
+
| save | filename | Saves the PDF object with the optional filename (creates user download prompt). |
69
+
| set | opt | Sets the specified properties. See [Options](#options) below for more details. |
70
+
| get | key, cbk | Returns the property specified in `key`, either as a Promise (use `.then` to access), or by calling `cbk` if provided. |
71
+
| then | onFulfilled, onRejected | Standard Promise method, with `this` re-bound to the Worker, and with added progress-tracking (see [Progress](#progress) below). Note that `.then` returns a `Worker`, which is a subclass of Promise. |
72
+
| 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. |
73
+
| thenExternal | onFulfilled, onRejected | True Promise method. Using this 'exits' the Worker chain - you will not be able to continue chaining Worker methods after `.thenExternal`. |
74
+
| catch, catchExternal | onRejected | Standard Promise method. `catchExternal` exits the Worker chain - you will not be able to continue chaining Worker methods after `.catchExternal`. |
75
+
| error | msg | Throws an error in the Worker's Promise chain. |
76
+
77
+
A few aliases are also provided for convenience:
78
+
79
+
| Method | Alias |
80
+
|-----------|-----------|
81
+
| save | saveAs |
82
+
| set | using |
83
+
| output | export |
84
+
| then | run |
85
+
36
86
## Options
37
87
38
88
html2pdf can be configured using an optional `opt` parameter:
39
89
40
90
```js
41
91
var element =document.getElementById('element-to-print');
The `opt` parameter has the following optional fields:
@@ -56,7 +112,7 @@ The `opt` parameter has the following optional fields:
56
112
|filename |string |'file.pdf' |The default filename of the exported PDF. |
57
113
|image |object |{type: 'jpeg', quality: 0.95} |The image type and quality used to generate the PDF. See the Extra Features section below. |
58
114
|enableLinks |boolean |true |If enabled, PDF hyperlinks are automatically added ontop of all anchor tags. |
59
-
|html2canvas |object |{ } |Configuration options sent directly to `html2canvas` ([see here](https://html2canvas.hertzen.com/documentation.html#available-options) for usage).|
115
+
|html2canvas |object |{ } |Configuration options sent directly to `html2canvas` ([see here](https://html2canvas.hertzen.com/configuration) for usage).|
60
116
|jsPDF |object |{ } |Configuration options sent directly to `jsPDF` ([see here](http://rawgit.com/MrRio/jsPDF/master/docs/jsPDF.html) for usage).|
61
117
62
118
### Page-breaks
@@ -82,6 +138,10 @@ You may customize the image type and quality exported from the canvas by setting
82
138
83
139
These options are limited to the available settings for [HTMLCanvasElement.toDataURL()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL), which ignores quality settings for 'png' images. To enable png image compression, try using the [canvas-png-compression shim](https://github.com/ShyykoSerhiy/canvas-png-compression), which should be an in-place solution to enable png compression via the `quality` option.
84
140
141
+
## Progress
142
+
143
+
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.
144
+
85
145
## Dependencies
86
146
87
147
html2pdf depends on the external packages [html2canvas](https://github.com/niklasvh/html2canvas), [jsPDF](https://github.com/MrRio/jsPDF), and [es6-promise](https://github.com/stefanpenner/es6-promise). These dependencies are automatically loaded when using NPM or the bundled package.
@@ -95,8 +155,6 @@ If using the unbundled `dist/html2pdf.min.js` (or its un-minified version), you
95
155
<scriptsrc="html2pdf.min.js"></script>
96
156
```
97
157
98
-
html2pdf currently uses [this fork](https://github.com/eKoopmans/html2canvas/tree/develop) of html2canvas to resolve a few bugs and add support for box-shadows and custom resolutions (via the `dpi`/`scale` options).
0 commit comments