业务需求
网页html生成A4大小分页的pdf,翻遍了整个互联网发现没有很系统的整理与分析,甚至对jsPDF的解析也没有几篇。遇到过几次,用的比较多,完成代码编写后特此整理分析,自我记录。
业务难点
1.存在图片/组件/文字被分割的现象,即分页处理
2.包括页头、页脚、上下安全间隔的情况
3.富文本分页情况
处理思路
通过深度搜索优先遍历,从顶部遍历需要转换的HTML节点, 并将节点分为三种情况进行处理(1. 普通节点。2. 需要进行分页处理并且内部可能包含也需要分页处理子节点的节点。3. 需要进行分页内部不包含需要分页处理的节点,即深度搜索的终点节点),通过从高到低遍历维护一个分页数组pages,该数组记录每一页的起始位置,如:pages[0] 对应 第一页起始位置, pages[1] 对应 第二页起始位置
图解如下:
![](https://i-blog.csdnimg.cn/blog_migrate/23cd95af35bc1cb4b0f7f5669b86e3f8.webp?x-image-process=image/format,png)
通过深度遍历后得出每页起始位置的数组,遍历数组,通过jspdf的addImage接口对canvas进行画面截取,由于addImage只能固定位置的左上角起始点,不能进行非常精确的上下定位截取(下一节会详解addImage
),会造成截取多余的内容(如上图页面1中pages[1] 下方的内容会和 页面2 中 pages[1] 下方的内容会一样(除长度外),而页面1中pages[1] 下方的内容是多余的(是属于页面2的内容))因此需要对页面不需要的内容 使用jspdf的addBlank进行空白遮挡处理
。
jsPDF.addImage
详解
官方文档链接addImage - Documentation (artskydj.github.io)
![](https://i-blog.csdnimg.cn/blog_migrate/848932698c473a9bfccce4dea588db15.webp?x-image-process=image/format,png)
需要注意的点是坐标(x,y) 的取值, (x,y)对应的是添加图片的左上角取值,宽高则是根据转化成canvas的宽高取值,图解如下
![](https://i-blog.csdnimg.cn/blog_migrate/30e9f8c5e8aafc0f409d5ffbef1b7ff3.webp?x-image-process=image/format,png)
因此在对一个长图片进行截取时,往往将y值设未负数,让需要截取图片的起始位置落于当前的pdf页面内,在当前案例下,每一页的图片摆放坐标y = -pages[i]
![](https://i-blog.csdnimg.cn/blog_migrate/c5ae4a88c41bfefa36abe555451f5d3c.webp?x-image-process=image/format,png)
jsPDF.rect
详解
文档链接 context2d - Documentation (artskydj.github.io)
该接口的参数 &#x