|
|
|
|
|
# 
|
|
|
|
|
|
|
|
|
|
|
|
[](https://github.com/MrRio/jsPDF/actions/workflows/continuous-integration.yml?query=branch%3Amaster)
|
|
|
|
|
|
[](https://codeclimate.com/repos/57f943855cdc43705e00592f/feed)
|
|
|
|
|
|
[](https://codeclimate.com/repos/57f943855cdc43705e00592f/coverage)
|
|
|
|
|
|
[](https://github.com/MrRio/jsPDF/blob/master/LICENSE)
|
|
|
|
|
|
[](https://lgtm.com/projects/g/MrRio/jsPDF/alerts/)
|
|
|
|
|
|
[](https://lgtm.com/projects/g/MrRio/jsPDF/context:javascript)
|
|
|
|
|
|
[](https://gitpod.io/from-referrer/)
|
|
|
|
|
|
|
|
|
|
|
|
**A library to generate PDFs in JavaScript.**
|
|
|
|
|
|
|
|
|
|
|
|
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.
|
|
|
|
|
|
|
|
|
|
|
|
jsPDF is now co-maintained by [yWorks - the diagramming experts](https://www.yworks.com/).
|
|
|
|
|
|
|
|
|
|
|
|
## [Live Demo](http://raw.githack.com/MrRio/jsPDF/master/) | [Documentation](http://raw.githack.com/MrRio/jsPDF/master/docs/)
|
|
|
|
|
|
|
|
|
|
|
|
## Install
|
|
|
|
|
|
|
|
|
|
|
|
Recommended: get jsPDF from npm:
|
|
|
|
|
|
|
|
|
|
|
|
```sh
|
|
|
|
|
|
npm install jspdf --save
|
|
|
|
|
|
# or
|
|
|
|
|
|
yarn add jspdf
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
Alternatively, load it from a CDN:
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
Or always get latest version via [unpkg](https://unpkg.com/browse/jspdf/)
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
The `dist` folder of this package contains different kinds of files:
|
|
|
|
|
|
|
|
|
|
|
|
- **jspdf.es.\*.js**: Modern ES2015 module format.
|
|
|
|
|
|
- **jspdf.node.\*.js**: For running in Node. Uses file operations for loading/saving files instead of browser APIs.
|
|
|
|
|
|
- **jspdf.umd.\*.js**: UMD module format. For AMD or script-tag loading.
|
|
|
|
|
|
- **polyfills\*.js**: Required polyfills for older browsers like Internet Explorer. The es variant simply imports all
|
|
|
|
|
|
required polyfills from `core-js`, the umd variant is self-contained.
|
|
|
|
|
|
|
|
|
|
|
|
Usually it is not necessary to specify the exact file in the import statement. Build tools or Node automatically figure
|
|
|
|
|
|
out the right file, so importing "jspdf" is enough.
|
|
|
|
|
|
|
|
|
|
|
|
## Usage
|
|
|
|
|
|
|
|
|
|
|
|
Then you're ready to start making your document:
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
import { jsPDF } from "jspdf";
|
|
|
|
|
|
|
|
|
|
|
|
// Default export is a4 paper, portrait, using millimeters for units
|
|
|
|
|
|
const doc = new jsPDF();
|
|
|
|
|
|
|
|
|
|
|
|
doc.text("Hello world!", 10, 10);
|
|
|
|
|
|
doc.save("a4.pdf");
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
If you want to change the paper size, orientation, or units, you can do:
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
// Landscape export, 2×4 inches
|
|
|
|
|
|
const doc = new jsPDF({
|
|
|
|
|
|
orientation: "landscape",
|
|
|
|
|
|
unit: "in",
|
|
|
|
|
|
format: [4, 2]
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
doc.text("Hello world!", 1, 1);
|
|
|
|
|
|
doc.save("two-by-four.pdf");
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### Running in Node.js
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
const { jsPDF } = require("jspdf"); // will automatically load the node version
|
|
|
|
|
|
|
|
|
|
|
|
const doc = new jsPDF();
|
|
|
|
|
|
doc.text("Hello world!", 10, 10);
|
|
|
|
|
|
doc.save("a4.pdf"); // will save the file in the current working directory
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### Other Module Formats
|
|
|
|
|
|
|
|
|
|
|
|
<details>
|
|
|
|
|
|
<summary>
|
|
|
|
|
|
<b>AMD</b>
|
|
|
|
|
|
</summary>
|
|
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
|
require(["jspdf"], ({ jsPDF }) => {
|
|
|
|
|
|
const doc = new jsPDF();
|
|
|
|
|
|
doc.text("Hello world!", 10, 10);
|
|
|
|
|
|
doc.save("a4.pdf");
|
|
|
|
|
|
});
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
</details>
|
|
|
|
|
|
|
|
|
|
|
|
<details>
|
|
|
|
|
|
<summary>
|
|
|
|
|
|
<b>Globals</b>
|
|
|
|
|
|
</summary>
|
|
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
|
const { jsPDF } = window.jspdf;
|
|
|
|
|
|
|
|
|
|
|
|
const doc = new jsPDF();
|
|
|
|
|
|
doc.text("Hello world!", 10, 10);
|
|
|
|
|
|
doc.save("a4.pdf");
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
</details>
|
|
|
|
|
|
|
|
|
|
|
|
### Optional dependencies
|
|
|
|
|
|
|
|
|
|
|
|
Some functions of jsPDF require optional dependencies. E.g. the `html` method, which depends on `html2canvas` and,
|
|
|
|
|
|
when supplied with a string HTML document, `dompurify`. JsPDF loads them dynamically when required
|
|
|
|
|
|
(using the respective module format, e.g. dynamic imports). Build tools like Webpack will automatically create separate
|
|
|
|
|
|
chunks for each of the optional dependencies. If your application does not use any of the optional dependencies, you
|
|
|
|
|
|
can prevent Webpack from generating the chunks by defining them as external dependencies:
|
|
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
|
// webpack.config.js
|
|
|
|
|
|
module.exports = {
|
|
|
|
|
|
// ...
|
|
|
|
|
|
externals: {
|
|
|
|
|
|
// only define the dependencies you are NOT using as externals!
|
|
|
|
|
|
canvg: "canvg",
|
|
|
|
|
|
html2canvas: "html2canvas",
|
|
|
|
|
|
dompurify: "dompurify"
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
In **Vue CLI** projects, externals can be defined via the [configureWebpack](https://cli.vuejs.org/config/#configurewebpack)
|
|
|
|
|
|
or [chainWebpack](https://cli.vuejs.org/config/#chainwebpack) properties of the `vue.config.js` file
|
|
|
|
|
|
(needs to be created, first, in fresh projects).
|
|
|
|
|
|
|
|
|
|
|
|
In **Angular** projects, externals can be defined using
|
|
|
|
|
|
[custom webpack builders](https://github.com/just-jeb/angular-builders/tree/master/packages/custom-webpack).
|
|
|
|
|
|
|
|
|
|
|
|
In **React** (`create-react-app`) projects, externals can be defined by either using
|
|
|
|
|
|
[react-app-rewired](https://github.com/timarney/react-app-rewired) or ejecting.
|
|
|
|
|
|
|
|
|
|
|
|
### TypeScript/Angular/Webpack/React/etc. Configuration:
|
|
|
|
|
|
|
|
|
|
|
|
jsPDF can be imported just like any other 3rd party library. This works with all major toolkits and frameworks. jsPDF
|
|
|
|
|
|
also offers a typings file for TypeScript projects.
|
|
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
|
import { jsPDF } from "jspdf";
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
You can add jsPDF to your meteor-project as follows:
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
meteor add jspdf:core
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### Polyfills
|
|
|
|
|
|
|
|
|
|
|
|
jsPDF requires modern browser APIs in order to function. To use jsPDF in older browsers like Internet Explorer,
|
|
|
|
|
|
polyfills are required. You can load all required polyfills as follows:
|
|
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
|
import "jspdf/dist/polyfills.es.js";
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
Alternatively, you can load the prebundled polyfill file. This is not recommended, since you might end up
|
|
|
|
|
|
loading polyfills multiple times. Might still be nifty for small applications or quick POCs.
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/polyfills.umd.js"></script>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## Use of Unicode Characters / UTF-8:
|
|
|
|
|
|
|
|
|
|
|
|
The 14 standard fonts in PDF are limited to the ASCII-codepage. If you want to use UTF-8 you have to integrate a
|
|
|
|
|
|
custom font, which provides the needed glyphs. jsPDF supports .ttf-files. So if you want to have for example
|
|
|
|
|
|
Chinese text in your pdf, your font has to have the necessary Chinese glyphs. So, check if your font supports
|
|
|
|
|
|
the wanted glyphs or else it will show garbled characters instead of the right text.
|
|
|
|
|
|
|
|
|
|
|
|
To add the font to jsPDF use our fontconverter in
|
|
|
|
|
|
[/fontconverter/fontconverter.html](https://rawgit.com/MrRio/jsPDF/master/fontconverter/fontconverter.html).
|
|
|
|
|
|
The fontconverter will create a js-file with the content of the provided ttf-file as base64 encoded string
|
|
|
|
|
|
and additional code for jsPDF. You just have to add this generated js-File to your project.
|
|
|
|
|
|
You are then ready to go to use setFont-method in your code and write your UTF-8 encoded text.
|
|
|
|
|
|
|
|
|
|
|
|
Alternatively you can just load the content of the \*.ttf file as a binary string using `fetch` or `XMLHttpRequest` and
|
|
|
|
|
|
add the font to the PDF file:
|
|
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
|
const doc = new jsPDF();
|
|
|
|
|
|
|
|
|
|
|
|
const myFont = ... // load the *.ttf font file as binary string
|
|
|
|
|
|
|
|
|
|
|
|
// add the font to jsPDF
|
|
|
|
|
|
doc.addFileToVFS("MyFont.ttf", myFont);
|
|
|
|
|
|
doc.addFont("MyFont.ttf", "MyFont", "normal");
|
|
|
|
|
|
doc.setFont("MyFont");
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## Advanced Functionality
|
|
|
|
|
|
|
|
|
|
|
|
Since the merge with the [yWorks fork](https://github.com/yWorks/jsPDF) there are a lot of new features. However, some
|
|
|
|
|
|
of them are API breaking, which is why there is an API-switch between two API modes:
|
|
|
|
|
|
|
|
|
|
|
|
- In "compat" API mode, jsPDF has the same API as MrRio's original version, which means full compatibility with plugins.
|
|
|
|
|
|
However, some advanced features like transformation matrices and patterns won't work. This is the default mode.
|
|
|
|
|
|
- In "advanced" API mode, jsPDF has the API you're used from the yWorks-fork version. This means the availability of
|
|
|
|
|
|
all advanced features like patterns, FormObjects, and transformation matrices.
|
|
|
|
|
|
|
|
|
|
|
|
You can switch between the two modes by calling
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
doc.advancedAPI(doc => {
|
|
|
|
|
|
// your code
|
|
|
|
|
|
});
|
|
|
|
|
|
// or
|
|
|
|
|
|
doc.compatAPI(doc => {
|
|
|
|
|
|
// your code
|
|
|
|
|
|
});
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
JsPDF will automatically switch back to the original API mode after the callback has run.
|
|
|
|
|
|
|
|
|
|
|
|
## Support
|
|
|
|
|
|
|
|
|
|
|
|
Please check if your question is already handled at Stackoverflow <https://stackoverflow.com/questions/tagged/jspdf>.
|
|
|
|
|
|
Feel free to ask a question there with the tag `jspdf`.
|
|
|
|
|
|
|
|
|
|
|
|
Feature requests, bug reports, etc. are very welcome as issues. Note that bug reports should follow these guidelines:
|
|
|
|
|
|
|
|
|
|
|
|
- A bug should be reported as an [mcve](https://stackoverflow.com/help/mcve)
|
|
|
|
|
|
- Make sure code is properly indented and [formatted](https://help.github.com/articles/basic-writing-and-formatting-syntax/#quoting-code) (Use ``` around code blocks)
|
|
|
|
|
|
- Provide a runnable example.
|
|
|
|
|
|
- Try to make sure and show in your issue that the issue is actually related to jspdf and not your framework of choice.
|
|
|
|
|
|
|
|
|
|
|
|
## Contributing
|
|
|
|
|
|
|
|
|
|
|
|
jsPDF cannot live without help from the community! If you think a feature is missing or you found a bug, please consider
|
|
|
|
|
|
if you can spare one or two hours and prepare a pull request. If you're simply interested in this project and want to
|
|
|
|
|
|
help, have a look at the open issues, especially those labeled with "bug".
|
|
|
|
|
|
|
|
|
|
|
|
You can find information about building and testing jsPDF in the
|
|
|
|
|
|
[contribution guide](https://github.com/MrRio/jsPDF/blob/master/CONTRIBUTING.md#pull-requests)
|
|
|
|
|
|
|
|
|
|
|
|
## Credits
|
|
|
|
|
|
|
|
|
|
|
|
- Big thanks to Daniel Dotsenko from [Willow Systems Corporation](https://github.com/willowsystems) for making huge contributions to the codebase.
|
|
|
|
|
|
- Thanks to Ajaxian.com for [featuring us back in 2009](http://ajaxian.com/archives/dynamically-generic-pdfs-with-javascript).
|
|
|
|
|
|
- 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
|
|
|
|
|
|
- Everyone else that's contributed patches or bug reports. You rock.
|
|
|
|
|
|
|
|
|
|
|
|
## License (MIT)
|
|
|
|
|
|
|
|
|
|
|
|
Copyright
|
|
|
|
|
|
(c) 2010-2021 James Hall, https://github.com/MrRio/jsPDF
|
|
|
|
|
|
(c) 2015-2021 yWorks GmbH, https://www.yworks.com/
|
|
|
|
|
|
|
|
|
|
|
|
Permission is hereby granted, free of charge, to any person obtaining
|
|
|
|
|
|
a copy of this software and associated documentation files (the
|
|
|
|
|
|
"Software"), to deal in the Software without restriction, including
|
|
|
|
|
|
without limitation the rights to use, copy, modify, merge, publish,
|
|
|
|
|
|
distribute, sublicense, and/or sell copies of the Software, and to
|
|
|
|
|
|
permit persons to whom the Software is furnished to do so, subject to
|
|
|
|
|
|
the following conditions:
|
|
|
|
|
|
|
|
|
|
|
|
The above copyright notice and this permission notice shall be
|
|
|
|
|
|
included in all copies or substantial portions of the Software.
|
|
|
|
|
|
|
|
|
|
|
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
|
|
|
|
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
|
|
|
|
|
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
|
|
|
|
|
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
|
|
|
|
|
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
|
|
|
|
|
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
|
|
|
|
|
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
