限定范围的 dom 拆分

[dixonGo]

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

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

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

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

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

[zhouyg]

方案 3 ，导出的时候可以通过离屏的方式，逐页的 html-to-canvas 不行吗，前面还是虚拟

[niubiman]

由后端生成可能会更简单一点

[lanced]

能不能把动态渲染的页面放到 iframe 里，全部渲染出来，视口固定展示一页，页眉页脚绝对定位，动态变更页码和滚动位置就行，打印的时候（调用浏览器的打印功能）用 css 的 @media print 和 @page 控制页眉页脚的显示，css 设置好以后会自动在打印的每一页加上页眉页脚

[dixonGo]

@zhouyg 现在导出 pdf 文件有一个后端方案，需要将页面地址给到后端服务，所以要求要展示的所有页容器必须在某个时刻后同时渲染出来，这就导致给后端的页面不能使用虚拟滚动，单独做预览时可以用虚拟滚动。给后端的页面要在某时刻后存在大量 dom ，会导致页面崩溃掉😭