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

东方睡衣

已于 2023-07-19 16:28:05 修改

阅读量1.5w

点赞数 12

文章标签： java 前端 javascript

于 2022-09-27 13:41:20 首次发布

本文链接：https://blog.csdn.net/web2022050903/article/details/127069911

版权

本文介绍了如何使用jsPDF和html2canvas将网页HTML生成A4大小分页的PDF，重点解决图片/组件/文字分割、页头页脚处理、富文本分页等问题。通过深度优先遍历处理不同类型的节点，确保内容完整不跨页。并提供了样例代码和注意事项。

摘要由CSDN通过智能技术生成

业务需求

网页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进行空白遮挡处理。