table表單打印添加頁碼和自動分頁

今天接到一個需求，就是打印頁面需要自動分頁，並且添加分頁頁碼。

查找了很多插件或者文檔都沒有好的處理方法，所以准備自己寫一個函數來處理。

頁面樣式：

 

 

 

 要求：第一個頁面添加總體的大表單，第二個頁面添加小表單。並且自動分頁，添加頁碼。table列表中如果有note字段的話，需要另起一行添加備注，如果沒有則隱藏，字數最多為200字。

 

先說思路：

 

1. 可以將頁面分為2種類型，第一種為首頁，第二種為子頁面：主要判斷不同頁面中列表最多能展示多少條數據

2.計算數據總共能分為多少數組：也就是分為多少頁面

計算的思路：每行的行高 = (存在note的話 ？（Math.ceil(note的字數 / 80) * 30 + 每行的固定高度） ：每行的固定高度 )；

計算每個頁面添加幾行數據： 循環所有的列表數據，然后將上面的行高相加，跟頁面的高度進行判斷，然后取數組的數據添加到新的數組中。

代碼：

/**
 * @export
 * @param {*} arr 數組長度
 * @param {*} tableHeight 第一頁-列表的高度
 * @param {*} otherHeight 第二頁-列表的高度
 * @param {*} 每行數據的高度為30
 * @param {*} 每行備注的高度為30
 */
export default function calculation (arr,tableHeight,otherHeight){
    const data = [];
    let dataIndex = 0;
    let totalH = 0;
    let start = 0;
    let end = 0;
    arr.map((item,index) =>{
        totalH += item.note ? (noteHeight(item.note) + 30) : 30;
        // 如果只有一頁的話，沒有超過全部高度的話，則將所有arr賦值給data,如果超過高度，則需要多個數組
        if(dataIndex === 0){
            if(totalH < tableHeight){
                data[0] = arr;
            }else{
                data[dataIndex] = arr.slice(0, index);
                // 重置高度
                totalH = 0;
                dataIndex++;
                start = index;
            }
        }
　　　　　// 如果超過一頁的話，並且是填充滿了整個頁面
        if(dataIndex > 0 && totalH >= otherHeight){ 
            totalH = 0;
            end = index;
            data[dataIndex] = arr.slice(start, end)
            start = end;
            dataIndex++;
        }
　　　　　// 如果超過一頁，沒有填充滿，說明是最后一頁
        if(dataIndex > 0 && totalH < otherHeight){
            data[dataIndex] = arr.slice(start, arr.length)
        }
    })
    return data;
}

// 計算note的高度
function noteHeight(note){
    let noteH = Math.ceil((note.length / 80)) * 30;
    return Number(noteH);
}

調用函數：

pageArr：打印的所有table數組
1000：第一個頁面的高度(展示列表的高度)
1200：第二個頁面的高度(展示列表的高度)

 const tableList = calculation(pageArr,1000,1200);
 console.log('tableList', tableList);

得到數據格式：

 

 

 

之后就可以得到每個頁面展示的條數了。剩下的就是樣式的調整。