jsPdf一款在线制作pdf文档的javascript库

一个用 JavaScript 生成 PDF 的库


安装

推荐:从 npm 获取 jsPDF:

sh 复制代码
npm install jspdf --save
# 或
yarn add jspdf

或者,从 CDN 加载:

html 复制代码
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/3.0.3/jspdf.umd.min.js"></script>

或者始终通过 unpkg 获取最新版本

html 复制代码
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>

此软件包的 dist 文件夹包含不同类型的文件:

  • jspdf.es.*.js:现代 ES2015 模块格式。
  • jspdf.node.*.js:用于在 Node 中运行。使用文件操作加载/保存文件,而非浏览器 API。
  • jspdf.umd.*.js:UMD 模块格式。用于 AMD 或脚本标签加载。
  • polyfills*.js:Internet Explorer 等老版本浏览器所需的 polyfill。es 版本只需从 core-js 导入所有
    所需的 polyfill,umd 版本则自带 polyfill。

通常无需在 import 语句中指定具体文件。构建工具或 Node 会自动识别
正确的文件,因此导入“jspdf”即可。

用法

然后您就可以开始制作文档了:

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");

如果要更改纸张尺寸、方向或单位,您可以执行以下操作:

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");

在 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

其他模块格式

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

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

可选依赖项

jsPDF 的某些函数需要可选依赖项。例如,html 方法依赖于 html2canvas,并且,当传入字符串 HTML 文档时,dompurify 也会被调用。JsPDF 会在需要时动态加载这些依赖项,(使用相应的模块格式,例如动态导入)。像 Webpack 这样的构建工具会自动为每个可选依赖项创建单独的chunk。如果您的应用程序不使用任何可选依赖项,您可以将其定义为外部依赖项,从而阻止 Webpack 生成这些 chunk:

js 复制代码
// webpack.config.js
module.exports = {
  // ...
  externals: {
    // only define the dependencies you are NOT using as externals!
    canvg: "canvg",
    html2canvas: "html2canvas",
    dompurify: "dompurify"
  }
};

Vue CLI 项目中,可以通过 vue.config.js 文件中的 configureWebpackchainWebpack 属性来定义外部组件(需要先在新项目中创建)。

Angular 项目中,可以使用自定义 webpack 构建器 来定义外部组件。

React (create-react-app) 项目中,可以使用react-app-rewired 或 ejecting 来定义外部组件。

TypeScript/Angular/Webpack/React/等配置:

jsPDF 可以像任何其他第三方库一样导入。它兼容所有主流工具包和框架。jsPDF
还为 TypeScript 项目提供了一个 Typing 文件。

js 复制代码
import { jsPDF } from "jspdf";

您可以按照如下方式将 jsPDF 添加到您的 meteor-project 中:

复制代码
meteor add jspdf:core

Polyfills

jsPDF 需要现代浏览器 API 才能正常运行。要在 Internet Explorer 等老版本浏览器中使用 jsPDF,
需要 polyfills。您可以按照如下方式加载所有必需的 polyfill:

js 复制代码
import "jspdf/dist/polyfills.es.js";

或者,您可以加载预捆绑的 polyfill 文件。我们不建议这样做,因为您可能需要
多次加载 polyfills。对于小型应用程序或快速 POC 来说,可能仍然很有用。

html 复制代码
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/3.0.3/polyfills.umd.js"></script>

使用 Unicode 字符 / UTF-8:

PDF 中的 14 种标准字体仅限于 ASCII 代码页。如果您想使用 UTF-8,则必须集成一个自定义字体,该字体提供所需的字形。jsPDF 支持 .ttf 文件。因此,如果您想在 PDF 中包含例如中文文本,您的字体必须具有必要的中文字形。因此,请检查您的字体是否支持所需的字形,否则将显示乱码而不是正确的文本。

要将字体添加到 jsPDF,请使用我们的字体转换器/fontconverter/fontconverter.html
字体转换器将创建一个 js 文件,其中包含提供的 ttf 文件的内容(以 base64 编码的字符串形式)以及 jsPDF 的附加代码。您只需将生成的 js 文件添加到您的项目中即可。然后,您就可以在代码中使用 setFont 方法并编写 UTF-8 编码的文本。

或者,您也可以使用 fetchXMLHttpRequest 将 *.ttf 文件的内容加载为二进制字符串,然后将字体添加到 PDF 文件中:

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");

高级功能

自从与 yWorks fork 合并以来,jsPDF 新增了许多功能。然而,其中一些功能会破坏 API,因此需要在两种 API 模式之间切换:

  • 在“兼容”API 模式下,jsPDF 的 API 与 MrRio 的原始版本相同,这意味着与插件完全兼容。但是,一些高级功能(例如转换矩阵和模式)将无法使用。这是默认模式。
  • 在“高级”API 模式下,jsPDF 的 API 与 yWorks fork 版本相同。这意味着所有高级功能(例如模式、FormObject 和转换矩阵)均可使用。

您可以通过调用以下命令在两种模式之间切换

javascript 复制代码
doc.advancedAPI(doc => {
  // your code
});
// or
doc.compatAPI(doc => {
  // your code
});

回调运行完成后,JsPDF 将自动切换回原始 API 模式。

支持

请检查您的问题是否已在 Stackoverflow https://stackoverflow.com/questions/tagged/jspdf 上处理。

欢迎使用标签“jspdf”在那里提问。

欢迎以问题 (Issues) 的形式提交功能请求、错误报告等。请注意,错误报告应遵循以下准则:

  • 错误应以 mcve 的形式报告
  • 确保代码缩进和格式化正确(使用 ``` 括起代码块)
  • 提供可运行的示例。
  • 尽量确保并在问题中表明该问题确实与 jspdf 相关,而非您选择的框架。

贡献

jsPDF 的生存离不开社区的帮助!如果您认为某个功能缺失或发现了 bug,请考虑您是否能抽出一两个小时准备一个 pull request。如果您只是对这个项目感兴趣并想提供帮助,请查看未解决的问题,尤其是那些标有“bug”的问题。

您可以在贡献指南中找到有关构建和测试 jsPDF 的信息。

致谢

  • 非常感谢 Willow Systems Corporation 的 Daniel Dotsenko 为代码库做出的巨大贡献。
  • 感谢 Ajaxian.com 在 2009 年推荐我们。 (互联网档案 Wayback Machine 参考)
  • 特别感谢 GH Lee (sphilee) 编写了 ttf-file-support 并提供了这项备受期待的大型功能。
  • 所有贡献补丁或错误报告的朋友们,你们太棒了。

许可证 (MIT)

版权
(c) 2010-2025 James Hall,https://github.com/MrRio/jsPDF
(c) 2015-2025 yWorks GmbH,https://www.yworks.com/

特此授予获得本软件及相关文档文件(以下简称“本软件”)副本的任何人,免费许可其无限制地处理本软件,包括但不限于使用、复制、修改、合并、发布、分发、再授权和/或销售本软件副本的权利,以及允许获得本软件的人员在以下条件下进行上述操作:

上述版权声明和本许可声明应包含在本软件的所有副本或重要部分中。

关于项目

jsPdf是一款功能强大的在线制作pdf文档的javascript库,API接口丰富,可以在线制作PDF文档并导出。
MIT
Javascript
30,664
4754
477
2009-12-06
2025-10-07

增长趋势 - stars