基于react-PC端打印分頁技術解決方案

前言

最近的項目在實現(xiàn)PC端打印時遇到了個大坑：打印分頁嘁锯，區(qū)區(qū)一個分頁要考慮的地方竟然還不少，在這里分享一下我關于分頁的處理思想丁屎。
注：本文只專注于打印的分頁部分店溢，不會敘述其他關于打印的實現(xiàn)等問題墙基。

展示圖與打印預覽圖

無分頁效果：

1.png

2.png

有分頁效果圖：

3.5.png

3.6.png

3.7.png

3.8.png

圖片分兩種，一是前端表格展示圖添谊，二是打印的預覽圖
表格中間的空隙和第幾頁的紅色標記處就是分頁位置财喳。
打印分頁指的是打印時一張紙打印一部分，分頁后中斷這張紙的打印斩狱，在下一張紙繼續(xù)打印耳高。

給行元素添加樣式page-break-after:always;即可從下一行開始換頁
給滿足出現(xiàn)分頁條件的元素添加此樣式
根據(jù)紙張大小和內容大小來選擇第一頁和之后每隔多少行換頁

注意：給<table>標簽的<tr>標簽添加此樣式會出現(xiàn)無效等問題，表格建議手寫秕岛，我就是一開始用<table>標簽實現(xiàn)的表格碌燕，結果換頁樣式無效误证，只好刪掉用其他普通標簽如<div>重寫。

分頁出現(xiàn)條件
頁碼出現(xiàn)條件
頁碼內容陆蟆。
下面以解釋+代碼的兩行形式來說明雷厂，小數(shù)字代表有幾種情況，只要將每種情況都 || 或起來即可叠殷，在需要添加分頁樣式的標簽處使用三元符改鲫，條件？分頁樣式：null林束。
我這里根據(jù)需求和實際內容大小像棘，打印頁第一頁最多七行表格內容，之后每頁最多9行表格內容壶冒。
item.dtoPrintListList 代表表格內容數(shù)組
valIndex 代表第幾行表格（索引）

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

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

2.十六行以上烟零，非最后一行。索引+1!==數(shù)組長度 &&(索引 + 1 - 7) % 9 === 0

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

表格內容在七行及以下時不需要分頁咸作；
七行以上根據(jù)情況：第一頁索引為6時分頁锨阿；最后一頁肯定不用再分頁，非最后一頁记罚、非第一頁之間按滿9行就分頁墅诡；

1.最后一行（索引+1 = 數(shù)組長度)

(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 )

頁碼出現(xiàn)分三種情況，打印一頁说庭、打印兩頁然磷、打印兩頁以上。只要保證頁碼在每頁只出現(xiàn)一次且出現(xiàn)在此頁表格內容最后一行之后即可。

頁碼內容不進入分頁和頁碼的條件判斷樣式中歧焦，僅僅用于展示字段
1.七行及以下，展示第1頁
2.七行以上痪欲，展示第X頁，X為 (索引 -6)/9 向上取整再加1

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

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者