基于react-PC端打印分頁技術(shù)解決方案
前言
最近的項(xiàng)目在實(shí)現(xiàn)PC端打印時遇到了個大坑：打印分頁，區(qū)區(qū)一個分頁要考慮的地方竟然還不少，在這里分享一下我關(guān)于分頁的處理思想。
注：本文只專注于打印的分頁部分，不會敘述其他關(guān)于打印的實(shí)現(xiàn)等問題。
展示圖與打印預(yù)覽圖
無分頁效果：
有分頁效果圖：
效果圖講解
圖片分兩種，一是前端表格展示圖，二是打印的預(yù)覽圖
表格中間的空隙和第幾頁的紅色標(biāo)記處就是分頁位置。
打印分頁指的是打印時一張紙打印一部分，分頁后中斷這張紙的打印，在下一張紙繼續(xù)打印。
問題需求
- 打印單據(jù)
- 分為頭部
- 內(nèi)容表格（第一頁7行，之后每9行換頁并攜帶頁碼，幾行根據(jù)內(nèi)容大小來定）
- 尾部
- 頭和尾部正常寫，表格內(nèi)容和頁面需要計(jì)算高度
總體思路
給行元素添加樣式page-break-after:always;即可從下一行開始換頁
給滿足出現(xiàn)分頁條件的元素添加此樣式
根據(jù)紙張大小和內(nèi)容大小來選擇第一頁和之后每隔多少行換頁
注意：給<table>標(biāo)簽的<tr>標(biāo)簽添加此樣式會出現(xiàn)無效等問題，表格建議手寫，我就是一開始用<table>標(biāo)簽實(shí)現(xiàn)的表格，結(jié)果換頁樣式無效，只好刪掉用其他普通標(biāo)簽如<div>重寫。
分頁時需要考慮的三個關(guān)鍵問題
- 分頁出現(xiàn)條件
- 頁碼出現(xiàn)條件
- 頁碼內(nèi)容。
下面以解釋+代碼的兩行形式來說明，小數(shù)字代表有幾種情況，只要將每種情況都 || 或起來即可，在需要添加分頁樣式的標(biāo)簽處使用三元符，條件？分頁樣式：null。
我這里根據(jù)需求和實(shí)際內(nèi)容大小，打印頁第一頁最多七行表格內(nèi)容，之后每頁最多9行表格內(nèi)容。
item.dtoPrintListList 代表表格內(nèi)容數(shù)組
valIndex 代表第幾行表格（索引）
一、分頁出現(xiàn)條件
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 )
表格內(nèi)容在七行及以下時不需要分頁；
七行以上根據(jù)情況：第一頁索引為6時分頁；最后一頁肯定不用再分頁，非最后一頁、非第一頁之間按滿9行就分頁；
二、頁碼出現(xiàn)條件
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)在此頁表格內(nèi)容最后一行之后即可。
三、頁碼內(nèi)容
頁碼內(nèi)容不進(jìn)入分頁和頁碼的條件判斷樣式中，僅僅用于展示字段
1.七行及以下，展示第1頁
2.七行以上，展示第X頁，X為 (索引 -6)/9 向上取整再加1
{valIndex > 6 ? `第${Math.ceil((valIndex - 6 ) / 9) + 1}頁` : '第1頁'}
