jsPDF

jsPDF

Github仓库：https://github.com/MrRio/jsPDF
项目首页：github.com/mrrio/jspdf
查看原文请前方官方网站文档
官网

安装

从npm获取jsPDF:

npm install jspdf --save
# or
yarn add jspdf

或者，从CDN加载它：

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

或者始终使用最新版本的Viaunpkg

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

此软件包的Dist文件夹中包含不同类型的文件

• jspdf.es.*.js: 现代ES2015模块格式。
• jspdf.node.*.js: 用于在Node.js中运行。使用文件操作加载/保存文件，而不是使用浏览器API.
• jspdf.umd.*.js: UMD 模块格式。 用于 AMD 或脚本标签加载。
• polyfills*.js：Internet Explorer等旧浏览器所需的兼容文件。ES变体只需从 core-js导入所有必需的polyfill，UMD 版本是独立的。

通常不需要在import语句中指定确切的文件。构建工具或节点会自动找到正确的文件，所以导入“jspdf”就足够了

使用

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

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"); // 将自动加载节点版本

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.jsfile的ConfigureWebPack或 chainWebpack定义外部（首先需要在新项目中创建）。
在Angular项目中，可以使用自定义网页包生成器定义外部。
在React（create-react-app）项目中，可以使用react-app-rewiredor-ejecting来定义外部。

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

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。对于小型应用程序或快速POC来说，可能仍然是不错的选择。

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

Unicode字符/UTF-8的使用：

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

要将字体添加到 jsPDF 中，请使用我们的 fontconverter。fontconverter将创建一个js文件，其中提供的ttf文件的内容转换为base64编码字符串和jsPDF的附加代码。您只需将生成的js文件添加到项目中。然后，您就可以在代码中使用setFont方法并编写UTF-8编码的文本了。

const doc = new jsPDF();

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

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

高级功能
自从与yworksfork合并以来，有很多新特性。但是，其中一些正在破坏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模式。