jsPDF 与 html2canvas 是目前比较主流的将前端页面转换成 PDF 的方案。

用户在实例化该类时可以将需要创建的 PDF 文件的一些配置文件传入，后续通过持续化调用 AutoText 提供的 render 方法来即可自动化向 PDF 文件中添加文字，而不用关注文字的换行以及 PDF 文件分页等问题， 提交我们使用 jsPDF 时的体验。

在调研需求的实现方案时，发现目前主流的方式是使用 jsPDF + html2canvas 的方案。这种方案需要我们先在页面上将要打印的内容渲染出来，然后使用 html2canvas 将 HTML 内容转成 Canvas，再将 Canvas 转成图片并通过 jsPDF 的 addImage 方法将图片添加到 PDF 文件中。

但是这个方案在后期进行实验的时候发现了一些问题，最终选择放弃使用 html2canvas，问题主要是以下几点：

后来通过在 github 上的查找，发现了一个叫做 jsPDF-AutoTable 的库，该库用于在 jsPDF 创建的 pdf 文件中创建一个复杂的表格。通过一些测试，该库完全可以满足我们的业务需求，那么现在的问题就剩下一个：第二页的文字描述如何解决。

其实 jsPDF 本身是提供手动添加文字内容的方法的，但这个方案在使用上有几个较重的心智负担：

基于以上问题，在梳理了文字渲染位置计算、换行、分页、缩进等情况后，根据这些写了一个 hook 方法，在项目中初始化传入一些 pdf 文件的信息，后续直接调用渲染文字方法可以毫无负担的创建我们想要的内容。

然后就有了这个库，与项目中不同的时，项目是基于 React Hook 编写的方法，并不能直接拿来作为通用方法使用，于是在原来的基础上做了一些调整：

目前第一个版本已经发布到 npm 上，后续会持续添加新功能，如文字自适应居中、支持行内文字加粗/斜体、页面水印等功能。

yarn add jspdf jspdf-autotext

然后在项目中直接引用即可，代码如下：

import jsPDF from 'jspdf';
import { AutoText as jsPDFAutoText } from 'jspdf-autotext';
// 创建 jsPDF 实例
const pdfFile = new jsPDF();
// 传入 jsPDF 实例，并使用默认的页面配置
const AutoText = new jsPDFAutoText({ pdfFile });
// 使用 render 方法渲染文字
const renderedPositions = AutoText.render([
    { text: '离骚', indent: 15 },
    { text: '屈原', indent: 15 },
    '帝高阳之苗裔兮，朕皇考曰伯庸。',
    '摄提贞于孟陬兮，惟庚寅吾以降。',
    '皇览揆余初度兮，肇锡余以嘉名:名余曰正则兮，字余曰灵均。',
]);
// 添加新的页面
AutoText.addPage();
// 渲染新的文字
AutoText.render([
    { text: '赋得古原草送别', indent: 14 },
    { text: '白居易', indent: 15 },
    '离离原上草，一岁一枯荣。',
    '野火烧不尽，春风吹又生。',
    '远芳侵古道，晴翠接荒城。',
    '又送王孙去，萋萋满别情。',
]);
// 保存文件
pdfFile.save();

打开我们保存的文件就可以看到这样的内容

每一行不同的文字都会自动计算其渲染的坐标位置，不过目前缺少文字自动居中功能，需要使用缩进 indent 来手动居中，后续会优化这个体验。