推荐:从 npm 获取 jsPDF:
npm install jspdf --save
# 或
yarn add jspdf
或者,从 CDN 加载:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/3.0.3/jspdf.umd.min.js"></script>
或者始终通过 unpkg 获取最新版本
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>
此软件包的 dist
文件夹包含不同类型的文件:
core-js
导入所有通常无需在 import 语句中指定具体文件。构建工具或 Node 会自动识别
正确的文件,因此导入“jspdf”即可。
然后您就可以开始制作文档了:
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");
如果要更改纸张尺寸、方向或单位,您可以执行以下操作:
// 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");
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
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 这样的构建工具会自动为每个可选依赖项创建单独的chunk。如果您的应用程序不使用任何可选依赖项,您可以将其定义为外部依赖项,从而阻止 Webpack 生成这些 chunk:
// 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
文件中的 configureWebpack 或 chainWebpack 属性来定义外部组件(需要先在新项目中创建)。
在 Angular 项目中,可以使用自定义 webpack 构建器 来定义外部组件。
在 React (create-react-app
) 项目中,可以使用react-app-rewired 或 ejecting 来定义外部组件。
jsPDF 可以像任何其他第三方库一样导入。它兼容所有主流工具包和框架。jsPDF
还为 TypeScript 项目提供了一个 Typing 文件。
import { jsPDF } from "jspdf";
您可以按照如下方式将 jsPDF 添加到您的 meteor-project 中:
meteor add jspdf:core
jsPDF 需要现代浏览器 API 才能正常运行。要在 Internet Explorer 等老版本浏览器中使用 jsPDF,
需要 polyfills。您可以按照如下方式加载所有必需的 polyfill:
import "jspdf/dist/polyfills.es.js";
或者,您可以加载预捆绑的 polyfill 文件。我们不建议这样做,因为您可能需要
多次加载 polyfills。对于小型应用程序或快速 POC 来说,可能仍然很有用。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/3.0.3/polyfills.umd.js"></script>
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 = ... // 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 模式之间切换:
您可以通过调用以下命令在两种模式之间切换
doc.advancedAPI(doc => {
// your code
});
// or
doc.compatAPI(doc => {
// your code
});
回调运行完成后,JsPDF 将自动切换回原始 API 模式。
请检查您的问题是否已在 Stackoverflow https://stackoverflow.com/questions/tagged/jspdf 上处理。
欢迎使用标签“jspdf”在那里提问。
欢迎以问题 (Issues) 的形式提交功能请求、错误报告等。请注意,错误报告应遵循以下准则:
jsPDF 的生存离不开社区的帮助!如果您认为某个功能缺失或发现了 bug,请考虑您是否能抽出一两个小时准备一个 pull request。如果您只是对这个项目感兴趣并想提供帮助,请查看未解决的问题,尤其是那些标有“bug”的问题。
您可以在贡献指南中找到有关构建和测试 jsPDF 的信息。
版权
(c) 2010-2025 James Hall,https://github.com/MrRio/jsPDF
(c) 2015-2025 yWorks GmbH,https://www.yworks.com/
特此授予获得本软件及相关文档文件(以下简称“本软件”)副本的任何人,免费许可其无限制地处理本软件,包括但不限于使用、复制、修改、合并、发布、分发、再授权和/或销售本软件副本的权利,以及允许获得本软件的人员在以下条件下进行上述操作:
上述版权声明和本许可声明应包含在本软件的所有副本或重要部分中。