基于react-PC端打印分页技术解决方案

前言

最近的项目在实现PC端打印时遇到了个大坑：打印分页，区区一个分页要考虑的地方竟然还不少，在这里分享一下我关于分页的处理思想。
注：本文只专注于打印的分页部分，不会叙述其他关于打印的实现等问题。

展示图与打印预览图

无分页效果：

1.png

2.png

有分页效果图：

3.5.png

3.6.png

3.7.png

3.8.png

图片分两种，一是前端表格展示图，二是打印的预览图
表格中间的空隙和第几页的红色标记处就是分页位置。
打印分页指的是打印时一张纸打印一部分，分页后中断这张纸的打印，在下一张纸继续打印。

给行元素添加样式page-break-after:always;即可从下一行开始换页
给满足出现分页条件的元素添加此样式
根据纸张大小和内容大小来选择第一页和之后每隔多少行换页

注意：给<table>标签的<tr>标签添加此样式会出现无效等问题，表格建议手写，我就是一开始用<table>标签实现的表格，结果换页样式无效，只好删掉用其他普通标签如<div>重写。

分页出现条件
页码出现条件
页码内容。
下面以解释+代码的两行形式来说明，小数字代表有几种情况，只要将每种情况都 || 或起来即可，在需要添加分页样式的标签处使用三元符，条件？分页样式：null。
我这里根据需求和实际内容大小，打印页第一页最多七行表格内容，之后每页最多9行表格内容。
item.dtoPrintListList 代表表格内容数组
valIndex 代表第几行表格（索引）

1.七行以上，十六行及以下，索引+1 = 7

(item.dtoPrintListList.length > 7 && 
item.dtoPrintListList.length <= 16 && 
valIndex +1 = 7 )

2.十六行以上，非最后一行。索引+1!==数组长度 &&(索引 + 1 - 7) % 9 === 0

(item.dtoPrintListList.length > 16 &&
 item.dtoPrintListList.length !== valIndex + 1  && 
(valIndex -6) % 9 === 0 )

表格内容在七行及以下时不需要分页；
七行以上根据情况：第一页索引为6时分页；最后一页肯定不用再分页，非最后一页、非第一页之间按满9行就分页；

1.最后一行（索引+1 = 数组长度)

(valIndex + 1) === item.dtoPrintListList.length)

2.七行以上，十六行及以下, 索引+1===7

(item.dtoPrintListList.length > 7 && 
item.dtoPrintListList.length <= 16 && 
valIndex +1 = 7 )

3.十六行以上，(索引 + 1 - 7) % 10 === 0

(item.dtoPrintListList.length > 16 &&
(valIndex -6) % 9 === 0 )

页码出现分三种情况，打印一页、打印两页、打印两页以上。只要保证页码在每页只出现一次且出现在此页表格内容最后一行之后即可。

页码内容不进入分页和页码的条件判断样式中，仅仅用于展示字段
1.七行及以下，展示第1页
2.七行以上，展示第X页，X为 (索引 -6)/9 向上取整再加1

{valIndex > 6 ? `第${Math.ceil((valIndex - 6 ) / 9) + 1}页` : '第1页'}