jsPDF + html2canvas A4分页截断完美解决方案（含代码 + 案例）

业务需求

网页html生成A4大小分页的pdf，翻遍了整个互联网发现没有很系统的整理与分析，甚至对jsPDF的解析也没有几篇。遇到过几次，用的比较多，完成代码编写后特此整理分析，自我记录。

业务难点

1.存在图片/组件/文字被分割的现象，即分页处理
2.包括页头、页脚、上下安全间隔的情况
3.富文本分页情况

处理思路

通过深度搜索优先遍历，从顶部遍历需要转换的HTML节点，并将节点分为三种情况进行处理（1. 普通节点。2. 需要进行分页处理并且内部可能包含也需要分页处理子节点的节点。3. 需要进行分页内部不包含需要分页处理的节点，即深度搜索的终点节点），通过从高到低遍历维护一个分页数组pages，该数组记录每一页的起始位置，如：pages[0] 对应 第一页起始位置， pages[1] 对应 第二页起始位置

图解如下：

通过深度遍历后得出每页起始位置的数组，遍历数组，通过jspdf的addImage接口对canvas进行画面截取，由于addImage只能固定位置的左上角起始点，不能进行非常精确的上下定位截取（下一节会详解addImage)，会造成截取多余的内容（如上图页面1中pages[1] 下方的内容会和 页面2 中 pages[1] 下方的内容会一样（除长度外），而页面1中pages[1] 下方的内容是多余的（是属于页面2的内容））因此需要对页面不需要的内容 使用jspdf的addBlank进行空白遮挡处理。