jsPDF 使用 JavaScript 在浏览器中生成 PDF 文档 - 文章教程

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

发布于 2020-09-23 字数 7229 浏览 3516 评论 0

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

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

安装

推荐使用 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 打包器

Reactcreate-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 文件的内容作为二进制字符串加载 fetchXMLHttpRequest 并将字体添加到 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 模式。

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清欢

文章 1 评论 0

贱贱哒

文章 3 评论 0

悸初

文章 2 评论 0

西瓜杏

文章 0 评论 0

各自安好

文章 0 评论 0