Home - jsPDF中文文档

一个用 JavaScript 生成 PDF 的库。

你可以在 Twitter 上关注我: @MrRio 或访问我公司的网站获取咨询服务。

在线演示 | 文档

安装

使用

然后你就可以开始创建文档了：

import { jsPDF } from "jspdf";

// 默认导出是 A4 纸张，纵向，使用毫米作为单位
const doc = new jsPDF();

doc.text("Hello world!", 10, 10);
doc.save("a4.pdf");

如果你想更改纸张大小、方向或单位，可以这样做：

// 横向导出，2×4 英寸
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 中运行

const { jsPDF } = require("jspdf"); // 将自动加载 node 版本

const doc = new jsPDF();
doc.text("Hello world!", 10, 10);
doc.save("a4.pdf"); // 将在当前工作目录保存文件

其他模块格式

AMD

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

全局变量

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 这样的构建工具会自动为每个可选依赖创建单独的代码块。如果你的应用程序不使用任何可选依赖，你可以通过将它们定义为外部依赖来阻止 Webpack 生成这些代码块：

// webpack.config.js
module.exports = {
  // ...
  externals: {
    // 只需定义你不使用的依赖项作为外部依赖！
    canvg: "canvg",
    html2canvas: "html2canvas",
    dompurify: "dompurify"
  }
};

在 Vue CLI 项目中，可以通过 vue.config.js 文件（在新项目中需要先创建）的 configureWebpack 或 chainWebpack 属性定义外部依赖。

在 Angular 项目中，可以使用 custom webpack builders 定义外部依赖。

在 React（create-react-app）项目中，可以使用 react-app-rewired 或 eject 来定义外部依赖。

TypeScript/Angular/Webpack/React 等配置：

jsPDF 可以像任何其他第三方库一样导入。这适用于所有主要的工具包和框架。jsPDF 还为 TypeScript 项目提供类型定义文件。

import { jsPDF } from "jspdf";

你可以按以下方式将 jsPDF 添加到你的 meteor 项目中：

meteor add jspdf:core

Polyfills

jsPDF 需要现代浏览器 API 才能运行。要在 Internet Explorer 等旧浏览器中使用 jsPDF，需要 polyfills。你可以按以下方式加载所有必需的 polyfills：

import "jspdf/dist/polyfills.es.js";

或者，你可以加载预打包的 polyfill 文件。不推荐这种方式，因为你可能会多次加载 polyfills。但对于小型应用程序或快速概念验证可能还是有用的。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.2/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 编码文本了。

或者，你可以使用 fetch 或 XMLHttpRequest 将 *.ttf 文件的内容作为二进制字符串加载，并将字体添加到 PDF 文件中：

const doc = new jsPDF();

const myFont = ... // 将 *.ttf 字体文件作为二进制字符串加载

// 将字体添加到 jsPDF
doc.addFileToVFS("MyFont.ttf", myFont);
doc.addFont("MyFont.ttf", "MyFont", "normal");
doc.setFont("MyFont");

高级功能

自从与 yWorks fork 合并以来，有了许多新功能。但是，其中一些功能会破坏 API，这就是为什么在两种 API 模式之间有一个 API 开关：

在"compat"API 模式下，jsPDF 具有与 MrRio 原始版本相同的 API，这意味着与插件完全兼容。但是，一些高级功能如变换矩阵和图案将无法工作。这是默认模式。
在"advanced"API 模式下，jsPDF 具有你在 yWorks-fork 版本中习惯的 API。这意味着可以使用所有高级功能，如图案、FormObjects 和变换矩阵。

你可以通过调用以下方法在两种模式之间切换

doc.advancedAPI(doc => {
  // 你的代码
});
// 或
doc.compatAPI(doc => {
  // 你的代码
});

回调运行后，jsPDF 将自动切换回原始 API 模式。

支持

请检查你的问题是否已在 Stackoverflow https://stackoverflow.com/questions/tagged/jspdf 上得到处理。欢迎在那里使用 jspdf 标签提出问题。

非常欢迎以 issues 的形式提出功能请求、错误报告等。请注意，错误报告应遵循以下准则：

错误应该作为最小完整可验证示例报告
确保代码正确缩进并格式化（在代码块周围使用 ```）
提供一个可运行的示例。
尝试确保并在你的 issue 中显示该问题实际上与 jspdf 有关，而不是你选择的框架。

贡献

没有社区的帮助，jsPDF 无法生存！如果你认为缺少某个功能或发现了 bug，请考虑是否可以抽出一两个小时准备一个拉取请求。如果你只是对这个项目感兴趣并想提供帮助，请查看未解决的 issues，特别是那些标记为"bug"的 issues。

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

致谢

非常感谢来自 Willow Systems Corporation 的 Daniel Dotsenko 对代码库做出的巨大贡献。
感谢 Ajaxian.com 在 2009 年报道了我们。（Internet Archive Wayback Machine 参考）
特别感谢 GH Lee（sphilee）编程实现了 ttf 文件支持，提供了一个重要且期待已久的功能
感谢所有贡献补丁或错误报告的人。你们太棒了。

许可证 (MIT)

特此免费授予任何获得本软件副本和相关文档文件（"软件"）的人不受限制地处理本软件的权利，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售本软件副本的权利，并允许向其提供本软件的人这样做，但须符合以下条件：

本软件按"原样"提供，不提供任何形式的明示或暗示的保证，包括但不限于对适销性、特定用途的适用性和非侵权性的保证。在任何情况下，作者或版权持有人均不对任何索赔、损害或其他责任负责，无论是在合同诉讼、侵权行为还是其他方面，由软件或软件的使用或其他交易引起、产生或与之相关。