jspdf vs react-pdf vs @react-pdf/renderer vs pdfmake
PDF 生成库
jspdfreact-pdf@react-pdf/rendererpdfmake类似的npm包:
PDF 生成库

PDF 生成库是用于在 Web 应用程序中创建和操作 PDF 文档的工具。这些库提供了不同的功能和灵活性,允许开发者根据需求生成动态或静态的 PDF 文件。选择合适的库可以显著影响开发效率、文档质量和用户体验。

npm下载趋势
3 年
GitHub Stars 排名
统计详情
npm包名称
下载量
Stars
大小
Issues
发布时间
License
jspdf2,759,98630,93830.1 MB1111 个月前MIT
react-pdf1,076,23010,797303 kB223 天前MIT
@react-pdf/renderer671,67216,276266 kB4205 天前MIT
pdfmake565,61612,18914 MB2901 天前MIT
功能对比: jspdf vs react-pdf vs @react-pdf/renderer vs pdfmake

生成方式

  • jspdf:

    jsPDF 提供了简单的 API 来创建 PDF 文档,支持从 HTML 元素中提取内容并转换为 PDF,适合快速生成简单文档。

  • react-pdf:

    react-pdf 主要用于在 React 应用中渲染和展示 PDF 文档,而不是生成新的 PDF。它支持多种 PDF 格式的渲染。

  • @react-pdf/renderer:

    @react-pdf/renderer 允许开发者使用 React 组件的方式来创建 PDF 文档,支持 JSX 语法,使得生成的 PDF 文档与应用的 UI 结构保持一致。

  • pdfmake:

    pdfmake 使用 JSON 对文档进行描述,支持复杂的布局和样式,适合需要高度自定义的 PDF 文档生成。

样式支持

  • jspdf:

    jsPDF 的样式支持相对简单,主要依赖于基本的文本样式和图形绘制,适合快速生成不需要复杂样式的文档。

  • react-pdf:

    react-pdf 支持基本的样式和布局,但主要关注于 PDF 的展示而非生成,因此样式功能有限。

  • @react-pdf/renderer:

    @react-pdf/renderer 支持 CSS 样式,允许开发者使用熟悉的样式规则来设计 PDF 文档,提供了丰富的样式选项。

  • pdfmake:

    pdfmake 提供了强大的样式支持,允许开发者定义字体、颜色、边距等,适合需要精确控制文档外观的场景。

学习曲线

  • jspdf:

    jsPDF 的学习曲线较平缓,API 简单易懂,适合快速上手,尤其是对于简单的 PDF 生成任务。

  • react-pdf:

    react-pdf 的学习曲线相对简单,特别是对于已经熟悉 React 的开发者,使用起来非常直观。

  • @react-pdf/renderer:

    @react-pdf/renderer 对于熟悉 React 的开发者来说,学习曲线相对较低,因为它使用了相似的组件化思想。

  • pdfmake:

    pdfmake 的学习曲线稍陡,因为它使用 JSON 描述文档结构,可能需要一些时间来掌握其复杂的布局和样式选项。

功能扩展性

  • jspdf:

    jsPDF 提供了一些插件和扩展,但整体扩展性有限,主要适合简单的 PDF 生成需求。

  • react-pdf:

    react-pdf 的扩展性主要体现在 PDF 的展示和交互上,适合需要在应用中嵌入 PDF 查看器的需求。

  • @react-pdf/renderer:

    @react-pdf/renderer 允许开发者通过 React 组件的方式扩展功能,适合需要自定义 PDF 生成逻辑的应用。

  • pdfmake:

    pdfmake 的扩展性较强,支持多种布局和样式,适合需要复杂文档的场景。

社区支持

  • jspdf:

    jsPDF 拥有广泛的用户基础和社区支持,许多示例和教程可供参考,适合初学者。

  • react-pdf:

    react-pdf 作为一个流行的库,拥有良好的社区支持,开发者可以找到丰富的资源和示例。

  • @react-pdf/renderer:

    @react-pdf/renderer 拥有活跃的社区支持,文档齐全,开发者可以轻松找到解决方案和示例。

  • pdfmake:

    pdfmake 也有良好的社区支持,文档详细,适合需要深入了解其功能的开发者。

如何选择: jspdf vs react-pdf vs @react-pdf/renderer vs pdfmake
  • jspdf:

    选择 jsPDF 如果你需要一个轻量级的解决方案来生成简单的 PDF 文档,尤其是当你需要从 HTML 内容生成 PDF 时。它易于使用,适合快速开发。

  • react-pdf:

    选择 react-pdf 如果你需要在 React 应用中显示 PDF 文档,而不仅仅是生成它。它允许你在应用中嵌入 PDF 查看器,适合需要展示现有 PDF 文档的场景。

  • @react-pdf/renderer:

    选择 @react-pdf/renderer 如果你在使用 React 并且需要将 React 组件直接转换为 PDF 文档。它支持样式和布局,适合需要复杂 UI 的应用。

  • pdfmake:

    选择 pdfmake 如果你需要一个功能强大的库来生成复杂的 PDF 文档,支持多种布局和样式选项。它使用 JSON 描述文档结构,非常灵活。

jspdf的README

jsPDF

Continous Integration Code Climate Test Coverage GitHub license Total alerts Language grade: JavaScript Gitpod ready-to-code

A library to generate PDFs in JavaScript.

You can catch me on twitter: @MrRio or head over to my company's website for consultancy.

jsPDF is now co-maintained by yWorks - the diagramming experts.

Live Demo | Documentation

Install

Recommended: get jsPDF from npm:

npm install jspdf --save
# or
yarn add jspdf

Alternatively, load it from a CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/3.0.4/jspdf.umd.min.js"></script>

Or always get latest version via unpkg

<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:

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:

// 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

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

AMD
require(["jspdf"], ({ jsPDF }) => {
  const doc = new jsPDF();
  doc.text("Hello world!", 10, 10);
  doc.save("a4.pdf");
});
Globals
const { jsPDF } = window.jspdf;

const doc = new jsPDF();
doc.text("Hello world!", 10, 10);
doc.save("a4.pdf");

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:

// 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 or 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.

In React (create-react-app) projects, externals can be defined by either using 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.

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:

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.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/3.0.4/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. 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:

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 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

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
  • Make sure code is properly indented and formatted (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

Credits

  • Big thanks to Daniel Dotsenko from Willow Systems Corporation for making huge contributions to the codebase.
  • Thanks to Ajaxian.com for featuring us back in 2009. (Internet Archive Wayback Machine reference)
  • Our special thanks to GH Lee (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-2025 James Hall, https://github.com/MrRio/jsPDF (c) 2015-2025 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.