大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

高级前端‬进阶

PDF 目前已成为网络文档共享的基本元素，本文将带着大家细数前端圈最火的PDF开源库，话不多说，直接开始。

PDFKit

PDFKit 是用于 Node 和浏览器环境的 JavaScript PDF 生成库。 借助于 PDFKit，开发者可以轻松创建复杂的、多页的、可打印的文档。 API 可链式调用，包括众多底层功能和高级功能的抽象。 PDFKit API 被设计为尽量简单的，但是通过函数组合可以快速生成复杂文档。

PDFKit的典型特征包括：

支持矢量图形：类似 HTML5 画布的 API；路径操作；用于轻松创建路径的 SVG 路径解析器；转换Transform；线性和径向渐变文本：换行；文本对齐；项目符号列表等众多功能字体嵌入：支持 TrueType (.ttf)、OpenType (.otf)、WOFF、WOFF2、TrueType Collections (.ttc) 和 Datafork TrueType (.dfont) 字体；字体子集图像嵌入：支持 JPEG 和 PNG 文件（包括索引 PNG 和具有透明度的 PNG）注释：链接；笔记；强调；下划线AcroForms大纲PDF安全：加密；访问权限（打印、复制、修改、注释、表格填写、内容可访问性、文档组装）辅助功能支持（标记内容、逻辑结构、标记 PDF、PDF/UA）

除了上面列举的功能外，包括：图案填充、用于创建表格和布局内容的高级 API、更多性能优化已经在陆续开发中，在不久后就会发布。下面的示例展示了使用PDFKit的简单示例：

const PDFDocument = require('pdfkit');const fs = require('fs');// 创建文档const doc = new PDFDocument();// 将其输出通过管道传输到某个地方，例如文件或 HTTP 响应// 请参阅下面的浏览器用法doc.pipe(fs.createWriteStream('output.pdf'));// 嵌入字体，设置字体大小，并渲染一些文本doc  .font('fonts/PalatinoBold.ttf')  .fontSize(25)  .text('Some text with an embedded font!', 100, 100);// 添加图像，将其限制为给定大小，并将其垂直和水平居中doc.image('path/to/image.png', {  fit: [250, 300],  align: 'center',  valign: 'center'});// 添加另外一页doc  .addPage()  .fontSize(25)  .text('Here is some vector graphics...', 100, 100);// 绘制三角形doc  .save()  .moveTo(100, 150)  .lineTo(100, 250)  .lineTo(200, 250)  .fill('#FF3300');// 应用一些变换并使用“奇偶”填充规则渲染 SVG 路径doc  .scale(0.6)  .translate(470, -380)  .path('M 250,75 L 323,301 131,161 369,161 177,301 z')  .fill('red', 'even-odd')  .restore();// 添加一些带有注释的文本doc  .addPage()  .fillColor('blue')  .text('Here is a link!', 100, 100)  .underline(100, 100, 160, 27, { color: '#0000FF' })  .link(100, 100, 160, 27, ';);// 完成 PDF 文件doc.end();

目前 PDFKit 在Github上有超过8.7k的star、1.1k的fork、超过64.1k的项目依赖量，代码贡献者80+，是一个优秀的前端开源项目。

pdfmake

纯 JavaScript 中的客户端、服务器端 PDF 操作库。pdfmake具有以下明显特性：

支持浏览器和Node.js环境：直接在浏览器中打印 PDF 或将其委托给 NodeJS 后端。 在这两种情况下使用相同的文档定义。完全声明：忘记手动 x、y 计算。 声明文档结构并让 pdfmake 完成剩下的工作。强大的布局引擎：使用段落、列、列表、表格、画布等，还支持开发者声明自己的样式，使用自定义字体，构建 DSL 并扩展框架。

在功能层面，pdfmake已经实现了以下诸多特征：

换行文本对齐（左、右、居中、对齐），编号和项目符号列表，表和列：自动/固定/星形宽度，列跨度和行跨度，在分页的情况下自动重复标题，图像和矢量图形方便的样式和样式继承页眉和页脚：静态或动态内容，访问当前页码和页数，背景层支持页面尺寸和方向边距自定义分页符字体嵌入支持复杂的多级（嵌套）结构目录用于打开/打印/下载生成的 PDF 的辅助方法PDF 元数据（例如作者、主题）的设置

目前 pdfmake 已经支持众多主流浏览器环境，包括：

Internet Explorer 11Edge 12+FirefoxChromeChrome (Android)OperaSafari (iOS)Safari (iOS) iPhone

在Node.js的版本支持上也是非常广泛，具体如下：

12 LTS (End-of-life: April 2022)14 LTS (End-of-life: April 2023)16 LTS (End-of-life: April 2024)18 LTS (End-of-life: April 2025)

而 pdfmake的 0.1.x 版本支持 Node.js 8 LTS、10 LTS、12 LTS、14 LTS。下面是异步使用 pdfmake 的示例：

$scope.generatePdf = function() {  // 在回调之前创建window  var win = window.open('', '_blank');  $http.post('/someUrl', data).then(function(response) {    // pass the "win" argument    pdfMake.createPdf(docDefinition).open({}, win);  });};

目前 pdfmake 在Github上有超过10.8k的star、2k的fork、超过67.9k的项目依赖量，代码贡献者84+，是一个优秀的前端开源项目。

jsPDF

jsPDF 是一个基于 HTML5 的客户端解决方案，用于生成各种用途的 PDF 文档，jsPDF 是一个使用 JavaScript 语言生成 PDF 的开源库。

开发者可以在 Firefox 插件，服务端脚本或是浏览器脚本中使用它，客户端 Safari 和 iPhone Safari 支持得最好，其次是 Opera 和 Windows 下的 Firefox3 等。IE 暂不支持。

使用 jsPDF 非常简单，首先安装相关的包即可：

npm install jspdf --save// oryarn add jspdf

或者引入相应的CDN资源：

<script src=";></script><script src=";></script>// unpkg版本

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

jspdf.es.*.js：现代 ES2015 模块格式。jspdf.node.*.js：在 Node 中运行，使用文件操作来加载/保存文件而不是浏览器 APIjspdf.umd.*.js：UMD模块格式， 用于 AMD 或脚本标签加载。polyfills*.js：旧版浏览器（如 Internet Explorer）所需的 polyfill，es 变体简单地从 core-js 导入所有必需的 polyfill，umd 变体是自包含的。

通常没有必要在导入语句中指定确切的文件。 构建工具或 Node 会自动找出正确的文件，因此导入 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"); // 会自动加载Node版本const doc = new jsPDF();doc.text("Hello world!", 10, 10);doc.save("a4.pdf");// 将文件保存在当前工作目录中

jsPDF 也支持在TypeScript、Angular、Webpack、React等进行使用，更多使用配置可以参考官方文档，本文不再过多展开。

目前 jsPDF 在Github 有超过26.5k的star、4.5k的fork、超过75.1k的项目依赖量，代码贡献者192+，是一个非常优秀的前端开源项目。

react-pdf

react-pdf 包用于使用 React 创建 PDF，如果开发者想显示现有的 PDF，可以尝试使用 react-pdf。对于react-pdf来说，在高层次上，文档创建过程由 6 个具体步骤组成。

内部结构创建

将 React 元素树转换为每个组件类型的适当内部实例，比如涉及保存这些（父子）节点之间的关系。除了 Document 之外，所有节点都将代表文档中的一个块，具有高度、宽度、填充和边距。

react-pdf 会处理这个数据结构，开始推断每个块在最终文档中的位置。

解析样式

此步骤涉及预处理节点样式，以及为用户未提供的所需属性定义默认值。 这样，所有后续步骤都可以在树中定义所有必需样式的基础上进行。

部分预处理涉及单位转换、样式继承和样式扩展。

获取资源

遍历内部节点树以获取任何所需的字体、图像或表情符号。

react-pdf 会异步运行所有这些请求，但在所有请求完成（成功或失败）之前不会继续。

排版文字

到这一步，react-pdf 已经加载了所有字体，可以将文本布局到段落中。

这是一个关键而复杂的步骤：首先使用适当的字体系列和大小将字符转换为字形，嵌入图像或表情符号图像（如果存在），并最终将它们分成几行，根据空格或根据语言（或自定义）规则分解单词

包装页面

这是最耗时的步骤，因为它不仅涉及计算每个元素在文档中的位置以及需要多少空间，而且还要将这些元素拆分到不同的页面中。

react-pdf 在内部使用 Yoga 布局来计算文档内节点的大小和坐标，并根据一组可自定义的启发式方法执行分页。

渲染

PDF 文档本身的创建。 对于这个任务，react-pdf 使用了很棒的 pdfkit。

一旦进入这个阶段，react-pdf 就有了内部树结构，其中包含生成文档所需的所有数据。 剩下的就是决定要如何处理这些数据。 这将根据开发者使用的绑定而有所不同，但基本上它意味着显示或保存它。

react-pdf 的使用也是非常简单，比如下面的示例：

import React from 'react';import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';// 创建样式const styles = StyleSheet.create({  page: {    flexDirection: 'row',    backgroundColor: '#E4E4E4'  },  section: {    margin: 10,    padding: 10,    flexGrow: 1  }});// 创建文档组件const MyDocument = () => (  <Document>    <Page size="A4" style={styles.page}>      <View style={styles.section}>        <Text>Section #1</Text>      </View>      <View style={styles.section}>        <Text>Section #2</Text>      </View>    </Page>  </Document>);

也可以使用 ReactDOM.render 方法进行渲染：

import React from 'react';import ReactDOM from 'react-dom';import { PDFViewer } from '@react-pdf/renderer';const App = () => (  <PDFViewer>    <MyDocument />  </PDFViewer>);ReactDOM.render(<App />, document.getElementById('root'));

在Node.js环境中可以将文档保存到一个文件中，比如下面的例子：

import React from 'react';import ReactPDF from '@react-pdf/renderer';ReactPDF.render(<MyDocument />, `${__dirname}/example.pdf`);

目前 react-pdf 在Github上有超过12.3k的star、1k的fork、超过7.2k的项目依赖量，代码贡献者107+，是一个不错的前端开源项目。

PDF.js

PDF.js 是一个通用的、基于 Web 标准的平台，用于解析和渲染 PDF。本质上，PDF.js 是一种使用 HTML5 构建的便携式文档格式 (PDF) 查看器， 由社区驱动并由 Mozilla 提供支持。

开发者如果需要在 Web 应用程序中使用 PDF.js，可以选择使用库的预构建版本或从源代码构建它。 PDF.js 在 pdfjs-dist 名称下提供用于 NPM 和 Bower 的预构建版本。

要使用PDF.js，需要先导入相应的CDN资源。

<script src=";></script><script src=";></script><script src=";></script>

下面示例演示了如何使用 promises 来处理加载期间的错误，还演示了如何等待页面加载和渲染。

// 如果提供了来自远程服务器的绝对 URL，则配置 CORS// 该服务器上的标头。var url = ';;// 通过 <script> 标签加载，创建访问 PDF.js 导出的快捷方式。var pdfjsLib = window['pdfjs-dist/build/pdf'];// 应指定 workerSrc 属性。pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';// 异步下载PDFvar loadingTask = pdfjsLib.getDocument(url);loadingTask.promise.then(function(pdf) {  console.log('PDF loaded');  // 获取第一页page  var pageNumber = 1;  pdf.getPage(pageNumber).then(function(page) {    console.log('Page loaded');    var scale = 1.5;    var viewport = page.getViewport({scale: scale});    // 使用 PDF 页面尺寸准备画布    var canvas = document.getElementById('the-canvas');    var context = canvas.getContext('2d');    canvas.height = viewport.height;    canvas.width = viewport.width;    // Render PDF page into canvas context    var renderContext = {      canvasContext: context,      viewport: viewport    };    var renderTask = page.render(renderContext);    renderTask.promise.then(function () {      console.log('Page rendered');    });  });}, function (reason) {  // PDF loading error  console.error(reason);});

关于 PDF.js 的更多用法可以参考文末资料，这里不再过多展开。目前 PDF.js 在Github上有超过42.5k的star、9.4k的fork、215的项目依赖量，代码贡献者360+，是一个优秀的前端开源项目。

本文总结

本文主要和大家介绍下全网最火的 5+ 前端 PDF 处理开源库。相信通过本文的阅读，大家对 各个 PDF 处理库会有一个初步的了解。

因为篇幅有限，文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！

参考资料

（众多示例）

封面图来自：