PDF生成是一个常见的需求，目的一般是将动态数据插入到特定格式的PDF模版中。......


PDF生成是一个常见的需求，目的一般是将动态数据插入到特定格式的PDF模版中。

比如签约协议，需要体现出甲方乙方的姓名、时间、签约期限（这些信息可能被维护在CMS后台中）、水印、盖章；又比如生成财务报表，将特定时间区间的收益曲线以图表形式体现在PDF中。

对于这样的诉求，实现方式有多种，本文会大致讨论三种思路：后端生成PDF、前端生成粗糙PDF、前/后端生成精确PDF，比较其中的优劣，给出方案选择的建议。另外，本文会针对前端生成精确PDF进一步展开，并提供[示例仓库](https://github.com/B-sirius/web-pdf)。

目录：

- [方案比较](#方案比较)
  - [后端生成PDF](#后端生成pdf)
  - [前端生成粗糙PDF](#前端生成粗糙pdf)
    - [1. PDF尺寸](#1-pdf尺寸)
    - [2. 分页、页首、页脚](#2-分页页首页脚)
    - [3. 客户端差异](#3-客户端差异)
    - [4. 预览不一致](#4-预览不一致)
    - [5. 结论](#5-结论)
  - [前/后端生成精确PDF](#前后端生成精确pdf)
    - [1. 字体，绕不过去的坎](#1-字体绕不过去的坎)
    - [2. 移动端预览](#2-移动端预览)
    - [3. 样式](#3-样式)
  - [插入需求：图表](#插入需求图表)
- [总结](#总结)


## 方案比较

### 后端生成PDF

后端生成PDF一直是非常常见的做法，其中主要的区别是采用怎样的PDF绘制方案。

对于简单的文本PDF需求，可以采用[itext](https://itextpdf.com/)，通过api快速的进行文字的编写排版；

对于复杂一些的需求，可以考虑[puppeteer](https://pptr.dev/)，这就是一个“运行在node的chrome”，所以它可以在后端虚空绘制html，并将其导出为PDF（前端思想其实很重）。

但后端方案再成熟，它都需要带宽成本、服务运行成本。另外在开发调试过程中，PDF的绘制结果也并不直观。

想空手套白狼的你，可能就想前端搞定，可以咋办？

### 前端生成粗糙PDF

前端生成粗糙PDF的原理其实和puppeteer很相似，我直接用真实的浏览器渲染html，将其打印为PDF不就完了么！

但问题有几个：

#### 1. PDF尺寸

PDF的尺寸是固定的，而浏览器尺寸是善变的。A4的尺寸在物理世界是210mm×297mm，涉及到电子产业的时候，便是**595 × 842 points**（PostScript定义）。puppeteer的一大优势就是作为headless chrome，可以方便的指定尺寸，比如指定一个595 × 842 px，凑合也能用，但是浏览器端这么搞就有点麻烦，当然肯定也是能搞得定。

#### 2. 分页、页首、页脚

默认情况下，浏览器打印网页为PDF的时候，分页是很强行的，噶你的图片、表格甚至文字就成两半了。虽然可以通过`page-break-after`之类的CSS打印属性来进行一定控制（手动分页），但想要流畅的自动分页是很麻烦的，需要结合样式定义和计算（puppeteer同样会遇到该问题）。

#### 3. 客户端差异

客户端的不同很可能导致生成结果的不同，如字体差异。

#### 4. 预览不一致

既然在客户端生成，很可能在下载PDF前，用户是能看到这份PDF的样子的，但下载下来的PDF往往与客户端呈现的是不一致的。毕竟我们是html转的，分页、字体、边距之类的，诸多差异了只能说。

#### 5. 结论

所以说呢，这种方法只建议用在很凑合的场景，否则就请继续往下看！

### 前/后端生成精确PDF

通过上面的介绍，我们发现PDF生成的挣扎主要集中于绘制，这里是一个两难命题：

- 采用基于api的方案，绘制并不直观。面对复杂场景可能有些痛苦（尤其是习惯于HTML语言体系的前端）

- 采用基于html的方案，绘制直观，但是难以匹配PDF的格式。

有没有一种方案，绘制上类似HTML，但又完美匹配了PDF呢？！

隆重介绍：[react-pdf](https://react-pdf.org/)，npm包是[@react-pdf/renderer](https://www.npmjs.com/package/@react-pdf/renderer)（正如名字，是renderer渲染器）可不要和npm上的[react-pdf](https://www.npmjs.com/package/react-pdf)（这个是pdf预览器）搞错了。

它的工作原理很简单：定制了各种组件，允许开发者用JSX语法进行绘制，并可以指定A4尺寸（以上面提到的points => pt为尺寸单位），提供了页首、页尾、分页等组件、属性，写起来就像是写普通的JSX，只不过呢，它可以以**canvas**而不是dom来做预览渲染。[官方demo](https://react-pdf.org/repl)看一眼就明白了。

![demo](https://s2.loli.net/2023/01/31/ILceZBFrHw9OsRg.png)

显然它很适合作为后端方案，React+SSR这不就来了么！

但我多提一句前端方案，区别不大，只是多了一些坑：

#### 1. 字体，绕不过去的坎

只要是搞pdf生成，字体不一致是小问题，字体缺失才是大头。为了能够让pdf支持中文，客户端加载一个中文字体文件是少不了的（放在后端这就不存在问题了）。我只说4个字：**方正黑体**。免费、无需授权、体积3M，在中文字体界算是顶尖的小了。

#### 2. 移动端预览

官方提供了一个[PDFViewer](https://react-pdf.org/components#pdfviewer)组件，基于Iframe来做PDF预览，但很不幸，这个组件不支持移动端。

但幸好我们有解决方案，还记得上面提到的非常相像的仓库[react-pdf](https://www.npmjs.com/package/react-pdf)（pdf预览器）么？它正好派上了用场。简单的来说，我们现场生成了pdf，然后将其吐给了pdf预览器。具体可以直接参考[代码](https://github.com/B-sirius/web-pdf/blob/12eedf4627e3a41212f6034c04f00e0cb8870a73/src/App.js#L2)。

#### 3. 样式

虽然`react-pdf`完全支持JSX，但是具体绘制的内容只能使用官方提供的组件，且使用官方暴露的`style`属性进行布局，其属性与React原生`style`的写法基本是一致的。只是要时刻记住，**它们不会变成Dom，自然也就不支持class等样式定义方式**。所以如果你喜欢一些现成的CSS三方库，如[tailwind](https://tailwindcss.com/)之类的，很可惜，不能用。

### 插入需求：图表

PDF里插图表，怎么画这个图表呢？以市面上成熟的ECharts为例，它们其实是提供了生成图片的能力的，只是注意要关闭动画。另外前端渲染与服务端渲染，会有一点点区别。

[示例代码](https://github.com/B-sirius/web-pdf/blob/main/src/utils/getChartsBlobImage.js)中展示了如何在前端去做图片的生成，其实就是先要用客户端的canvas绘制出图表（在视区外绘制），将其生成blob形式的图片，将其丢到`React-PDF`中。如果是在服务端，可以使用[node-echarts-canvas](https://www.npmjs.com/package/node-echarts-canvas)一类的方案。

## 总结

本文提供了一些PDF生成上的思路，希望能够帮助大家进行比较。最后对于前端+react-pdf的组合，俺可以提供一个示例仓库（只适配了移动端），具体可见[这里](https://github.com/B-sirius/web-pdf)。



LWDW!