限定范围的 dom 拆分

查看 26|回复 0
作者:dixonGo   
一个需求需要使用后端数据动态渲染一个页面,页面元素包括文本,表格,图片等,页面渲染时希望展示为 pdf 样式,即给出一页 pdf 的高度后,每隔该高度插入一个页眉,一个页脚来构成一页 pdf 。想到的方案有三种:
[ol]

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

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

  • 不转换为图片并切图,而是计算好所需的页容器个数后,将 dom 复制 n 次放到 n 个页容器中,每个页容器根据自身的索引对内部的 dom 的位置进行偏移,这种方式由于需要复制 dom 的个数随页数增加,会极大地消耗内存,为了减小内存的消耗,又采用了虚拟滚动的方式进行了优化,但是为了再将这个页面导出为 pdf 文件就需要在同一时刻使得所有页容器同时渲染,这就意味着不能采用虚拟滚动,
    [/ol]
    想问问大家还有没有更好的方案。。。
  • 您需要登录后才可以回帖 登录 | 立即注册

    返回顶部