1 | # ![jsPDF](https://parall.ax/parallax-2016/img/svg/jspdf-logo.svg)
|
---|
2 |
|
---|
3 | [![Continous Integration](https://github.com/MrRio/jsPDF/actions/workflows/continuous-integration.yml/badge.svg)](https://github.com/MrRio/jsPDF/actions/workflows/continuous-integration.yml?query=branch%3Amaster)
|
---|
4 | [![Code Climate](https://codeclimate.com/repos/57f943855cdc43705e00592f/badges/2665cddeba042dc5191f/gpa.svg)](https://codeclimate.com/repos/57f943855cdc43705e00592f/feed)
|
---|
5 | [![Test Coverage](https://codeclimate.com/repos/57f943855cdc43705e00592f/badges/2665cddeba042dc5191f/coverage.svg)](https://codeclimate.com/repos/57f943855cdc43705e00592f/coverage)
|
---|
6 | [![GitHub license](https://img.shields.io/github/license/MrRio/jsPDF.svg)](https://github.com/MrRio/jsPDF/blob/master/LICENSE)
|
---|
7 | [![Total alerts](https://img.shields.io/lgtm/alerts/g/MrRio/jsPDF.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/MrRio/jsPDF/alerts/)
|
---|
8 | [![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/MrRio/jsPDF.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/MrRio/jsPDF/context:javascript)
|
---|
9 | [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
|
---|
10 |
|
---|
11 | **A library to generate PDFs in JavaScript.**
|
---|
12 |
|
---|
13 | You can [catch me on twitter](http://twitter.com/MrRio): [@MrRio](http://twitter.com/MrRio) or head over to [my company's website](http://parall.ax) for consultancy.
|
---|
14 |
|
---|
15 | jsPDF is now co-maintained by [yWorks - the diagramming experts](https://www.yworks.com/).
|
---|
16 |
|
---|
17 | ## [Live Demo](http://raw.githack.com/MrRio/jsPDF/master/) | [Documentation](http://raw.githack.com/MrRio/jsPDF/master/docs/)
|
---|
18 |
|
---|
19 | ## Install
|
---|
20 |
|
---|
21 | Recommended: get jsPDF from npm:
|
---|
22 |
|
---|
23 | ```sh
|
---|
24 | npm install jspdf --save
|
---|
25 | # or
|
---|
26 | yarn add jspdf
|
---|
27 | ```
|
---|
28 |
|
---|
29 | Alternatively, load it from a CDN:
|
---|
30 |
|
---|
31 | ```html
|
---|
32 | <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.2/jspdf.umd.min.js"></script>
|
---|
33 | ```
|
---|
34 |
|
---|
35 | Or always get latest version via [unpkg](https://unpkg.com/browse/jspdf/)
|
---|
36 |
|
---|
37 | ```html
|
---|
38 | <script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>
|
---|
39 | ```
|
---|
40 |
|
---|
41 | The `dist` folder of this package contains different kinds of files:
|
---|
42 |
|
---|
43 | - **jspdf.es.\*.js**: Modern ES2015 module format.
|
---|
44 | - **jspdf.node.\*.js**: For running in Node. Uses file operations for loading/saving files instead of browser APIs.
|
---|
45 | - **jspdf.umd.\*.js**: UMD module format. For AMD or script-tag loading.
|
---|
46 | - **polyfills\*.js**: Required polyfills for older browsers like Internet Explorer. The es variant simply imports all
|
---|
47 | required polyfills from `core-js`, the umd variant is self-contained.
|
---|
48 |
|
---|
49 | Usually it is not necessary to specify the exact file in the import statement. Build tools or Node automatically figure
|
---|
50 | out the right file, so importing "jspdf" is enough.
|
---|
51 |
|
---|
52 | ## Usage
|
---|
53 |
|
---|
54 | Then you're ready to start making your document:
|
---|
55 |
|
---|
56 | ```javascript
|
---|
57 | import { jsPDF } from "jspdf";
|
---|
58 |
|
---|
59 | // Default export is a4 paper, portrait, using millimeters for units
|
---|
60 | const doc = new jsPDF();
|
---|
61 |
|
---|
62 | doc.text("Hello world!", 10, 10);
|
---|
63 | doc.save("a4.pdf");
|
---|
64 | ```
|
---|
65 |
|
---|
66 | If you want to change the paper size, orientation, or units, you can do:
|
---|
67 |
|
---|
68 | ```javascript
|
---|
69 | // Landscape export, 2×4 inches
|
---|
70 | const doc = new jsPDF({
|
---|
71 | orientation: "landscape",
|
---|
72 | unit: "in",
|
---|
73 | format: [4, 2]
|
---|
74 | });
|
---|
75 |
|
---|
76 | doc.text("Hello world!", 1, 1);
|
---|
77 | doc.save("two-by-four.pdf");
|
---|
78 | ```
|
---|
79 |
|
---|
80 | ### Running in Node.js
|
---|
81 |
|
---|
82 | ```javascript
|
---|
83 | const { jsPDF } = require("jspdf"); // will automatically load the node version
|
---|
84 |
|
---|
85 | const doc = new jsPDF();
|
---|
86 | doc.text("Hello world!", 10, 10);
|
---|
87 | doc.save("a4.pdf"); // will save the file in the current working directory
|
---|
88 | ```
|
---|
89 |
|
---|
90 | ### Other Module Formats
|
---|
91 |
|
---|
92 | <details>
|
---|
93 | <summary>
|
---|
94 | <b>AMD</b>
|
---|
95 | </summary>
|
---|
96 |
|
---|
97 | ```js
|
---|
98 | require(["jspdf"], ({ jsPDF }) => {
|
---|
99 | const doc = new jsPDF();
|
---|
100 | doc.text("Hello world!", 10, 10);
|
---|
101 | doc.save("a4.pdf");
|
---|
102 | });
|
---|
103 | ```
|
---|
104 |
|
---|
105 | </details>
|
---|
106 |
|
---|
107 | <details>
|
---|
108 | <summary>
|
---|
109 | <b>Globals</b>
|
---|
110 | </summary>
|
---|
111 |
|
---|
112 | ```js
|
---|
113 | const { jsPDF } = window.jspdf;
|
---|
114 |
|
---|
115 | const doc = new jsPDF();
|
---|
116 | doc.text("Hello world!", 10, 10);
|
---|
117 | doc.save("a4.pdf");
|
---|
118 | ```
|
---|
119 |
|
---|
120 | </details>
|
---|
121 |
|
---|
122 | ### Optional dependencies
|
---|
123 |
|
---|
124 | Some functions of jsPDF require optional dependencies. E.g. the `html` method, which depends on `html2canvas` and,
|
---|
125 | when supplied with a string HTML document, `dompurify`. JsPDF loads them dynamically when required
|
---|
126 | (using the respective module format, e.g. dynamic imports). Build tools like Webpack will automatically create separate
|
---|
127 | chunks for each of the optional dependencies. If your application does not use any of the optional dependencies, you
|
---|
128 | can prevent Webpack from generating the chunks by defining them as external dependencies:
|
---|
129 |
|
---|
130 | ```js
|
---|
131 | // webpack.config.js
|
---|
132 | module.exports = {
|
---|
133 | // ...
|
---|
134 | externals: {
|
---|
135 | // only define the dependencies you are NOT using as externals!
|
---|
136 | canvg: "canvg",
|
---|
137 | html2canvas: "html2canvas",
|
---|
138 | dompurify: "dompurify"
|
---|
139 | }
|
---|
140 | };
|
---|
141 | ```
|
---|
142 |
|
---|
143 | In **Vue CLI** projects, externals can be defined via the [configureWebpack](https://cli.vuejs.org/config/#configurewebpack)
|
---|
144 | or [chainWebpack](https://cli.vuejs.org/config/#chainwebpack) properties of the `vue.config.js` file
|
---|
145 | (needs to be created, first, in fresh projects).
|
---|
146 |
|
---|
147 | In **Angular** projects, externals can be defined using
|
---|
148 | [custom webpack builders](https://github.com/just-jeb/angular-builders/tree/master/packages/custom-webpack).
|
---|
149 |
|
---|
150 | In **React** (`create-react-app`) projects, externals can be defined by either using
|
---|
151 | [react-app-rewired](https://github.com/timarney/react-app-rewired) or ejecting.
|
---|
152 |
|
---|
153 | ### TypeScript/Angular/Webpack/React/etc. Configuration:
|
---|
154 |
|
---|
155 | jsPDF can be imported just like any other 3rd party library. This works with all major toolkits and frameworks. jsPDF
|
---|
156 | also offers a typings file for TypeScript projects.
|
---|
157 |
|
---|
158 | ```js
|
---|
159 | import { jsPDF } from "jspdf";
|
---|
160 | ```
|
---|
161 |
|
---|
162 | You can add jsPDF to your meteor-project as follows:
|
---|
163 |
|
---|
164 | ```
|
---|
165 | meteor add jspdf:core
|
---|
166 | ```
|
---|
167 |
|
---|
168 | ### Polyfills
|
---|
169 |
|
---|
170 | jsPDF requires modern browser APIs in order to function. To use jsPDF in older browsers like Internet Explorer,
|
---|
171 | polyfills are required. You can load all required polyfills as follows:
|
---|
172 |
|
---|
173 | ```js
|
---|
174 | import "jspdf/dist/polyfills.es.js";
|
---|
175 | ```
|
---|
176 |
|
---|
177 | Alternatively, you can load the prebundled polyfill file. This is not recommended, since you might end up
|
---|
178 | loading polyfills multiple times. Might still be nifty for small applications or quick POCs.
|
---|
179 |
|
---|
180 | ```html
|
---|
181 | <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.2/polyfills.umd.js"></script>
|
---|
182 | ```
|
---|
183 |
|
---|
184 | ## Use of Unicode Characters / UTF-8:
|
---|
185 |
|
---|
186 | The 14 standard fonts in PDF are limited to the ASCII-codepage. If you want to use UTF-8 you have to integrate a
|
---|
187 | custom font, which provides the needed glyphs. jsPDF supports .ttf-files. So if you want to have for example
|
---|
188 | Chinese text in your pdf, your font has to have the necessary Chinese glyphs. So, check if your font supports
|
---|
189 | the wanted glyphs or else it will show garbled characters instead of the right text.
|
---|
190 |
|
---|
191 | To add the font to jsPDF use our fontconverter in
|
---|
192 | [/fontconverter/fontconverter.html](https://rawgit.com/MrRio/jsPDF/master/fontconverter/fontconverter.html).
|
---|
193 | The fontconverter will create a js-file with the content of the provided ttf-file as base64 encoded string
|
---|
194 | and additional code for jsPDF. You just have to add this generated js-File to your project.
|
---|
195 | You are then ready to go to use setFont-method in your code and write your UTF-8 encoded text.
|
---|
196 |
|
---|
197 | Alternatively you can just load the content of the \*.ttf file as a binary string using `fetch` or `XMLHttpRequest` and
|
---|
198 | add the font to the PDF file:
|
---|
199 |
|
---|
200 | ```js
|
---|
201 | const doc = new jsPDF();
|
---|
202 |
|
---|
203 | const myFont = ... // load the *.ttf font file as binary string
|
---|
204 |
|
---|
205 | // add the font to jsPDF
|
---|
206 | doc.addFileToVFS("MyFont.ttf", myFont);
|
---|
207 | doc.addFont("MyFont.ttf", "MyFont", "normal");
|
---|
208 | doc.setFont("MyFont");
|
---|
209 | ```
|
---|
210 |
|
---|
211 | ## Advanced Functionality
|
---|
212 |
|
---|
213 | Since the merge with the [yWorks fork](https://github.com/yWorks/jsPDF) there are a lot of new features. However, some
|
---|
214 | of them are API breaking, which is why there is an API-switch between two API modes:
|
---|
215 |
|
---|
216 | - In "compat" API mode, jsPDF has the same API as MrRio's original version, which means full compatibility with plugins.
|
---|
217 | However, some advanced features like transformation matrices and patterns won't work. This is the default mode.
|
---|
218 | - In "advanced" API mode, jsPDF has the API you're used from the yWorks-fork version. This means the availability of
|
---|
219 | all advanced features like patterns, FormObjects, and transformation matrices.
|
---|
220 |
|
---|
221 | You can switch between the two modes by calling
|
---|
222 |
|
---|
223 | ```javascript
|
---|
224 | doc.advancedAPI(doc => {
|
---|
225 | // your code
|
---|
226 | });
|
---|
227 | // or
|
---|
228 | doc.compatAPI(doc => {
|
---|
229 | // your code
|
---|
230 | });
|
---|
231 | ```
|
---|
232 |
|
---|
233 | JsPDF will automatically switch back to the original API mode after the callback has run.
|
---|
234 |
|
---|
235 | ## Support
|
---|
236 |
|
---|
237 | Please check if your question is already handled at Stackoverflow <https://stackoverflow.com/questions/tagged/jspdf>.
|
---|
238 | Feel free to ask a question there with the tag `jspdf`.
|
---|
239 |
|
---|
240 | Feature requests, bug reports, etc. are very welcome as issues. Note that bug reports should follow these guidelines:
|
---|
241 |
|
---|
242 | - A bug should be reported as an [mcve](https://stackoverflow.com/help/mcve)
|
---|
243 | - Make sure code is properly indented and [formatted](https://help.github.com/articles/basic-writing-and-formatting-syntax/#quoting-code) (Use ``` around code blocks)
|
---|
244 | - Provide a runnable example.
|
---|
245 | - Try to make sure and show in your issue that the issue is actually related to jspdf and not your framework of choice.
|
---|
246 |
|
---|
247 | ## Contributing
|
---|
248 |
|
---|
249 | jsPDF cannot live without help from the community! If you think a feature is missing or you found a bug, please consider
|
---|
250 | if you can spare one or two hours and prepare a pull request. If you're simply interested in this project and want to
|
---|
251 | help, have a look at the open issues, especially those labeled with "bug".
|
---|
252 |
|
---|
253 | You can find information about building and testing jsPDF in the
|
---|
254 | [contribution guide](https://github.com/MrRio/jsPDF/blob/master/CONTRIBUTING.md#pull-requests)
|
---|
255 |
|
---|
256 | ## Credits
|
---|
257 |
|
---|
258 | - Big thanks to Daniel Dotsenko from [Willow Systems Corporation](https://github.com/willowsystems) for making huge contributions to the codebase.
|
---|
259 | - Thanks to Ajaxian.com for [featuring us back in 2009](http://web.archive.org/web/20111011192314/http://ajaxian.com/archives/dynamically-generic-pdfs-with-javascript). (Internet Archive Wayback Machine reference)
|
---|
260 | - Our special thanks to GH Lee ([sphilee](https://github.com/sphilee)) for programming the ttf-file-support and providing a large and long sought after feature
|
---|
261 | - Everyone else that's contributed patches or bug reports. You rock.
|
---|
262 |
|
---|
263 | ## License (MIT)
|
---|
264 |
|
---|
265 | Copyright
|
---|
266 | (c) 2010-2021 James Hall, https://github.com/MrRio/jsPDF
|
---|
267 | (c) 2015-2021 yWorks GmbH, https://www.yworks.com/
|
---|
268 |
|
---|
269 | Permission is hereby granted, free of charge, to any person obtaining
|
---|
270 | a copy of this software and associated documentation files (the
|
---|
271 | "Software"), to deal in the Software without restriction, including
|
---|
272 | without limitation the rights to use, copy, modify, merge, publish,
|
---|
273 | distribute, sublicense, and/or sell copies of the Software, and to
|
---|
274 | permit persons to whom the Software is furnished to do so, subject to
|
---|
275 | the following conditions:
|
---|
276 |
|
---|
277 | The above copyright notice and this permission notice shall be
|
---|
278 | included in all copies or substantial portions of the Software.
|
---|
279 |
|
---|
280 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
---|
281 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
---|
282 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
---|
283 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
---|
284 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
---|
285 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
---|
286 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
---|