限定范围的 dom 拆分

一个需求需要使用后端数据动态渲染一个页面，页面元素包括文本，表格，图片等，页面渲染时希望展示为 pdf 样式，即给出一页 pdf 的高度后，每隔该高度插入一个页眉，一个页脚来构成一页 pdf 。想到的方案有三种：

1. 解析不加页眉页脚时的 dom 结构，在合适的位置将 dom 进行拆分，过程需要涉及较多的计算，考虑页面元素的跨页展示问题，耗时很长，算法也没有实现完美；

2. 计算出所需的页数后将之前的 dom 用 html2canvas 转换为图片，每个一定高度切图将图片填充到封装好的 pdf 页容器中，但 dom 转换为图片的过程中会有些变形，有些文字之间的空格会莫名消失；

3. 不转换为图片并切图，而是计算好所需的页容器个数后，将 dom 复制 n 次放到 n 个页容器中，每个页容器根据自身的索引对内部的 dom 的位置进行偏移，这种方式由于需要复制 dom 的个数随页数增加，会极大地消耗内存，为了减小内存的消耗，又采用了虚拟滚动的方式进行了优化，但是为了再将这个页面导出为 pdf 文件就需要在同一时刻使得所有页容器同时渲染，这就意味着不能采用虚拟滚动，

想问问大家还有没有更好的方案。。。