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
+28-29Lines changed: 28 additions & 29 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,31 +2,24 @@
2
2
3
3
html2pdf converts any webpage or element into a printable PDF entirely client-side using [html2canvas](https://github.com/niklasvh/html2canvas) and [jsPDF](https://github.com/MrRio/jsPDF).
4
4
5
-
## Install
5
+
## Getting started
6
6
7
-
1. Copy `html2pdf.js` to your project directory.
8
-
2. Fetch the dependencies `html2canvas` and `jsPDF`, which can be found in the `vendor` folder.
9
-
3. Include the files in your HTML document (**order is important**, otherwise `jsPDF` will override `html2canvas` with its own internal implementation):
7
+
There are two ways to install html2pdf:
10
8
11
-
```html
12
-
<scriptsrc="jspdf.min.js"></script>
13
-
<scriptsrc="html2canvas.min.js"></script>
14
-
<scriptsrc="html2pdf.js"></script>
15
-
```
16
-
17
-
**Note:** For best results, use the custom build of `html2canvas` found in the `vendor` folder, which contains added features and hotfixes.
9
+
1.**NPM:** Use `npm install --save html2pdf` to add html2pdf and its dependencies to your project. *Note: html2pdf **will not** run in Node.js, it must be run in a browser.*
10
+
2.**HTML:** Download `dist/html2pdf.bundle.min.js` to your project folder and include it in your HTML with `<script src="html2pdf.bundle.min.js"></script>`.
18
11
19
-
## Usage
20
-
21
-
### Basic usage
22
-
23
-
Including html2pdf exposes the `html2pdf` function. Calling it will create a PDF and prompt the user to save the file:
12
+
Once installed, html2pdf is ready to use. This command will generate a PDF of `#element-to-print` and prompt the user to save the result:
24
13
25
14
```js
26
15
var element =document.getElementById('element-to-print');
27
16
html2pdf(element);
28
17
```
29
18
19
+
*[Click here](#dependencies) for more information about using the unbundled version `dist/html2canvas.min.js`.*
20
+
21
+
## Options
22
+
30
23
The PDF can be configured using an optional `opt` parameter:
31
24
32
25
```js
@@ -42,18 +35,16 @@ html2pdf(element, {
42
35
43
36
The `opt` parameter has the following optional fields:
|margin |number or array |0 |PDF margin (in jsPDF units). Can be a single number, `[vMargin, hMargin]`, or `[top, left, bottom, right]`.|
41
+
|filename |string |'file.pdf' |The default filename of the exported PDF. |
42
+
|image |object |{type: 'jpeg', quality: 0.95} |The image type and quality used to generate the PDF. See the Extra Features section below. |
43
+
|enableLinks |boolean |true |If enabled, PDF hyperlinks are automatically added ontop of all anchor tags. |
51
44
|html2canvas |object |{ } |Configuration options sent directly to `html2canvas` ([see here](https://html2canvas.hertzen.com/documentation.html#available-options) for usage).|
52
45
|jsPDF |object |{ } |Configuration options sent directly to `jsPDF` ([see here](http://rawgit.com/MrRio/jsPDF/master/docs/jsPDF.html) for usage).|
53
46
54
-
### Extra features
55
-
56
-
#### Page-breaks
47
+
### Page-breaks
57
48
58
49
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`). For React elements, use `className=html2pdf__page-break`. 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:
59
50
@@ -65,7 +56,7 @@ You may add `html2pdf`-specific page-breaks to your document by adding the CSS c
65
56
</div>
66
57
```
67
58
68
-
####Image type and quality
59
+
### Image type and quality
69
60
70
61
You may customize the image type and quality exported from the canvas by setting the `image` option. This must be an object with the following fields:
71
62
@@ -78,9 +69,17 @@ These options are limited to the available settings for [HTMLCanvasElement.toDat
78
69
79
70
## Dependencies
80
71
81
-
html2pdf depends on the external packages [`html2canvas`](https://github.com/niklasvh/html2canvas) and [`jsPDF`](https://github.com/MrRio/jsPDF).
72
+
html2pdf depends on the external packages [`html2canvas`](https://github.com/niklasvh/html2canvas) and [`jsPDF`](https://github.com/MrRio/jsPDF). These dependencies are automatically loaded when using NPM or the bundled package.
73
+
74
+
If using the un-bundled `dist/html2pdf.min.js` (or its un-minified version), you must also include each dependency. Order is important, otherwise html2canvas will be overridden by jsPDF's own internal implementation:
75
+
76
+
```html
77
+
<scriptsrc="jspdf.min.js"></script>
78
+
<scriptsrc="html2canvas.min.js"></script>
79
+
<scriptsrc="html2pdf.min.js"></script>
80
+
```
82
81
83
-
For best results, use [this custom build](https://github.com/eKoopmans/html2canvas/tree/develop) of `html2canvas`, which includes bugfixes and adds support for box-shadows and custom resolutions (via the `dpi`/`scale` options).
82
+
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).
84
83
85
84
## Contributing
86
85
@@ -90,7 +89,7 @@ When submitting an issue, please provide reproducible code that highlights the i
90
89
91
90
### Pull requests
92
91
93
-
Right now, html2pdf is a single source file located in `/src/`. If you want to create a new feature or bugfix, feel free to fork and submit a pull request!
92
+
If you want to create a new feature or bugfix, please feel free to fork and submit a pull request! Use the [`develop`](/eKoopmans/html2pdf/tree/develop) branch, which features the latest development, and make changes to `/src/` rather than directly to `/dist/`. You can test your changes by rebuilding with `npm run build`.
0 commit comments