简单又实用的小文章来了----表格分页打印的那些小事（2）

前言

之前写过一篇表格分页打印的实践，其基本思路是按照一比一还原打印宽高，然后根据页面高度内容以及内容长度进行粗略计算，针对不能显示的进行内容分割。

相比上次逻辑稍微繁琐一点，今天分享的方式是更加简单的，我们根据每个最小展示行单位的渲染高度进行累加，当不能在当前页面显示的时候，把这行的数据放到新的一页展示。如果你有展示表头的需求，可以把表头的部分单独拿出来。

另外，相比常规的表格来说，如果你想实践更加复杂的布局，个人更建议你使用div模拟加flex布局来实现表格或者常规文档的展示需求。

分享点

展示比例符合打印纸比例

纠正的第一点是，我们在打印时，所需要的页面宽高并不一定是一个固定的宽高，只要符合A4或者你要打印纸张的宽高比即可。符合这个宽高比的情况下，无论是比实际大，还是小，打印的是否都可以选择缩放到对应尺寸，然后打印。

备注：

• 建议针对需要打印的内容单独定义页面，去预览效果以及调用浏览器的打印。
• a4纸的宽高比为：1.414286 ， 页面的宽高可以为：1188*840。

从内容的长度计算高度变为从dom部分获取渲染高度

原先我的方式为利用字符串的长度，然后利用页面的宽度除字号，得到一行放多少字，再用总字数计算出可以有多少行，利用每行的标准高度乘行数得到当前行所需要的高度。用这个高度累加到总高度，能放下，则显示，高度递减；否则，则拆分留下当前页可展示的部分，剩下的第二页显示。

新的方式：1 利用渲染高度代替计算高度 2 不在拆分内容，而是最小展示单元整体换行。

利用每显示行单位得到dom元素，然后用offsetHeight 得到其渲染后的真实高度，后面用这个高度累加到总高度，能放下，则显示，高度递减；否则，整行数据放到第二页去显示，不拆分数据。

页眉，页脚的设置问题

如果你想设置页眉页脚的内容，你可以这样写：

页眉部分的文字打印颜色会比正文浅一些，所以需要在打印样式中单独设置过字体颜色加强。

@media print {
   /*设置打印样式*/
   .previewcontainer {
      .page {
         .yemei {
            color: #000;
         }
         .pagenum {
            color: #000;
         }
      }
   }
}

某些内容不想被打印上如何处理

思路1 ： 利用打印样式，讲不需要打印的部分在打印的媒体查询中设置为false
思路2： 不需要打印的部分，利用绝对定位或者非常规定位，打印时会丢失

更多未解决的问题点待你解决中

• antd checkbox的选中样式在显示时可以，打印时丢失，最终用自定义样式解决的。
• react didupdate的生命周期中可能会拿不到元素的渲染高度，目前通过延迟计算的方案打补丁实现。

历史文章

• 表格分页打印（一）：www.yuque.com/robinson/fe…