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

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, 'http://google.com/');
// 完成 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 11
Edge 12+
Firefox
Chrome
Chrome (Android)
Opera
Safari (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
// or
yarn add jspdf

或者引入相应的CDN资源：



// unpkg版本

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

jspdf.es.*.js：现代 ES2015 模块格式。
jspdf.node.*.js：在 Node 中运行，使用文件操作来加载/保存文件而不是浏览器 API
jspdf.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 = () => (
  
    
      
        Section #1
      
      
        Section #2
      
    
  
);

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

import React from 'react';
import ReactDOM from 'react-dom';
import { PDFViewer } from '@react-pdf/renderer';

const App = () => (
  
    
  
);

ReactDOM.render(, document.getElementById('root'));

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

import React from 'react';
import ReactPDF from '@react-pdf/renderer';

ReactPDF.render(, `${__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资源。

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

// 如果提供了来自远程服务器的绝对 URL，则配置 CORS
// 该服务器上的标头。
var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf';
// 通过

全网最火的 5+优质前端 PDF 开源库

PDFKit

pdfmake

jsPDF

react-pdf

内部结构创建

解析样式

获取资源

排版文字

包装页面

渲染

PDF.js

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

接口测试遇到500报错?别慌，你的头部可能有点问题

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

关于HTML5被简称做H5，你怎么看?（html5缩写）

现在页面实时聊天都使用Websocket技术实现吗?