jsPDF 使用 JavaScript 在浏览器中生成 PDF 文档

Question

jsPDF 是一个基于 HTML5 的客户端解决方案，用于生成各种用途的 PDF 文档，jsPDF 是一个使用 JavaScript 语言生成 PDF 的开源库。你可以在 Firefox 插件，服务端脚本或是浏览器脚本中使用它，客户端 Safari 和 iPhone Safari 支持得最好，其次是 Opera 和 Windows 下的 Firefox3 等。IE 暂不支持。

安装

推荐使用 npm 或者 yarn 安装 jsPDF

npm install jspdf --save
# or
yarn add jspdf

或者从免费的 CDN 服务加载它：

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

或者是通过 unpkg 提供的 CDN 服务：

<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>

这个 dist 文件夹包含不同类型的文件：

• Jspdf.es.*.js*：ES 2015 模块格式。
• Jspdf.node.*.js*：在 Node 服务端运行。使用文件操作来加载/保存文件，而不是浏览器 API。
• Jspdf.umd.*.js：UMD模块格式。用于 AMD 或脚本标签加载。
• polyfills*.js：Internet Explore r等旧浏览器所需的兼容文件。ES变体只需从 core-js，UMD 版本是独立的。

通常，没有必要在 import 语句中指定确切的文件。构建工具或节点自动找到正确的文件，因此导入 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");

如果要更改 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");

在 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

其他模块格式

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 文档时。jsPDF 在需要时动态加载它们（使用相应的模块格式，例如动态导入）。像 webpack 这样的构建工具将自动为每个可选的依赖项创建单独的块。如果应用程序不使用任何可选依赖项，则可以通过将这些块定义为外部依赖项来防止 webpack 生成这些模块：

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

在 Vue CLI 项目中，外部可以通过 配置Webpack 或 链式网络包 属性的 vue.config.js 文件。

在 Angular 项目中，外部可以使用 自定义 webpack 打包器。

在 React （create-react-app）项目中，外部可以通过以下两种方法来定义：react-app-rewired 或者 ejecting。

TypeScript/Angular/Webpack/React/etc. 配置

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

import { jsPDF } from "jspdf";

您可以将 jsPDF 添加到您的 meteor 项目中，如下所示：

meteor add jspdf:core

Polyfills

jsPDF 需要现代浏览器 API 才能正常工作。要在早期浏览器，如 InternetExplorer 中使用 jsPDF，需要使用 polyfills。您可以按以下方式加载所有所需的 polyfills：

安装可选的 core-js 依赖库：

npm install --save core-js

然后导入 polyfills：

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

或者您可以加载预打包好的的 polyfills 文件。但这是不建议的，因为您可能会多次加载 polyfills。但对于小型应用程序或快速创建功能来说，可能仍然是很棒的。

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

使用 Unicode 字符 / UTF-8：

PDF 格式的 14 种标准字体仅限于 ASCII 代码。如果您想使用 UTF-8，您必须集成一个自定义字体，它提供所需的符号。jsPDF 支持 .ttf 字体文件。所以如果你想在你的 pdf 中有中文文本，你的字体必须有必要的汉字符号。因此检查您的字体是否支持想要的图形，否则它将显示混乱的字符，而不是正确的文本。

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

或者，您可以使用以下方法将 *.ttf 文件的内容作为二进制字符串加载 fetch 或 XMLHttpRequest 并将字体添加到 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");

高级功能

jsPDF 与 yWorks fork 插件有很多相似之处，但是，其中一些 API 正在重构，这就是为什么在两种 API 模式之间存在 API 切换的原因：

• 在 compat API 模式下，jsPDF 具有与 MrRio 的原始版本相同的 API，这意味着与插件完全兼容。然而一些高级特性，如转换矩阵和模式将无法工作。这是默认模式。
• 在 advanced API 模式下，jsPDF 拥有从 yWorks-fork 版本中使用的 API。这意味着所有高级特性，如模式、FormObjects 和 转换矩阵的可用性。

您可以通过调用

doc.advancedAPI(doc => {
  // your code
});
// or
doc.compatAPI(doc => {
  // your code
});

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

相关链接

• github 地址：https://github.com/mrrio/jspdf
• npm 地址：https://www.npmjs.com/package/jspdf