## 前言 print作為瀏覽已經比較成熟的技術可以經常被用來打印頁面的部分內容，我們可以在mdn上查看到mdn相關的簡單介紹。 - [window.print api介紹](https://developer.mozilla.org/en-US/docs/Web/API/Window/print) - [caniuse print:包括print的事件，分頁，媒體查詢等兼容性部分](https://caniuse.com/#search=print) - [https://github.com/DoersGuild/jQuery.print](https://github.com/DoersGuild/jQuery.print) 備注：juqery的print除了基本的打印之外，還可以控制一些基本的樣式，標題，頁眉頁腳的設置等。 ## 需求 本文主要介紹的不是以上的基本點，而是table在打印的時候，會因為一頁無法承載而導致分頁，然而我們并不知道分頁之后的效果，當我們點擊預覽的時候才發現，原來一個整體的表格被分為了兩個部分，而且還是同一行的被分割壞了。 那么產品無疑是希望體驗升級的： - 在頁面查看時直接顯示打印之后的效果，對于打印預覽是有心里預期的，可以直接展示出什么位置會分頁。所以我在代碼設計上，直接為每個分頁的部分直接變為新分割一個表格，然后通過頁面的margin間距，在展示時就有分頁的預期效果。 ``` .m-print-table{ &:not(:first-child){ margin-top:10px } } ``` - 將print對于表格的分頁進行代碼設計，通過代碼計算出當前頁的空間是否還能放下當前行，如果可以那么顯示并循環；如果不可以，計算本行內容的大小，進行計算分割出還可以放下幾行內容，剩下的內容放到下一頁。 ## 常識 ### 展示高度 頁面的展示高度一般設置為950 ### ui頁面 && 打印預覽 ui頁面的顯示與打印預覽的部分有較大的差別，并不是完全打印ui頁面的效果。 - 一般情況下，每行所承載的數據量和ui頁面是不同的。 - 一般情況下打印很多情況下需要分頁，而ui上其實數據多頁面也是連在一起的。 ## 代碼的設計原則 ### 原本的頁面模板 準備好進行按照預覽規則拆分首先需要一個原來的表格模板，以及以后打印之后的容器模板。 為了簡化模型，我這里只考慮兩列，左邊為數據項，右邊為內容的表格。 ``` // 要處理的原表格模板的所有tr let trs = $('#demoTable').find('tr') // 打印之后顯示的table存放的容器 // 內容進行轉換 let $container = $('#printContainer') ``` ### 準備好分頁的間隔模板 ``` const tableHeader = '<table class="m-print-table-process"><tbody>' const tableFooter = '</tbody></table><div class="pager"></div>' ``` ### 分頁符的樣式 因為我的ui體驗是設計頁面展示時也進行相應的分頁，所以沒有加媒體查詢，你可以去根據自己的需要決定是否需要加。 ``` .pager{ page-break-after:always; } @media print{ //媒體查詢樣式 } ``` ### 判斷條件 ``` // 是否是初始頁 初始頁可能會有一些抬頭信息，比如下賣弄的81高度 let pageInit = true // 默認的頁面高度 let pageHeight = 950 // 初始化頁面高度參數為0 不斷累加 let initHeight = 0 // 計算當前頁面的可用展示高度，每次進入新頁面重新計算 let currentPageHeight = pageInit ? pageHeight - 81 : pageHeight; // 獲取當前行的高度 let height = idStr && (idStr === 'processList' || idStr === 'billList') ? this.getHeight(strArr) : 35 // 如果高度大于當前可展示高度 if(initHeight >= currentPageHeight || (initHeight + height >= currentPageHeight){ } ``` ### 區分的根據不同類型進行展示 - 展示數據為數組的 ``` // 特殊業務類型的 // 目前只考慮兩頁之內可以放下 // 獲取分割后的數組 以及新的頁面高度（傳入當前行字符串，當前頁面剩余可展示高度） let {countArr, newPageHeight} = this.getSplitArr(strArr, currentPageHeight - initHeight) countArr.map((item, index) => { // 當前的繼續追加到表格中 下一個重開表格 if (index === 0) { let tdStr = item.map(it => `${it}<br/>`).join('') tempHtml += `<tr><td>${typeStr}</td><td>${tdStr}</td></tr>` } else if (index === 1) { if (item.length > 0) { tempHtml = tempHtml + tableFooter + tableHeader let tdStr = item.map(it => `${it}<br/>`).join('') tempHtml += `<tr><td>${typeStr}</td><td>${tdStr}</td></tr>` } initHeight = newPageHeight } }) ``` - 展示數據為基本數據字符串類型的 ``` tempHtml = tempHtml + tableFooter + tableHeader tempHtml += `<tr>${trs[i].innerHTML}</tr>` initHeight = initHeight - currentPageHeight + height pageInit = false ``` - 當前頁還可以放下數據的，正常拼接 ``` tempHtml += `<tr>${trs[i].innerHTML}</tr>` initHeight += height ``` ### 分割字符串數組的方法 其中計算高度的部分，40為經過試驗后每行剩余可展示的科學可用的40個中文字符，而25位默認一行數據所需要的高度。 備注：這里我業務展示的數據是一個數組結構，如果你的是字符串結構要比我的判斷簡單很多。 經過這個方法將數據進行分割到兩個數據后（countArr），前面的部分放到上一頁，剩下的數據放到下一頁，并計算出下一頁還剩余的空間（newPageHeight），暫時沒考慮第二頁也放不下的情況。 ``` /** * @description 根據數組以及頁面剩余高度，拆分數據數組 * @param {Array} dataArr * @param {Number} remainHeight */ getSplitArr(dataArr, remainHeight) { if (!dataArr || dataArr.length === 0) console.warn('數據為空') let getHeight = (data) => Math.ceil(data.length / 40) * 25 let countArr = [[], []] let partIndex = 0 let totalHeight = remainHeight + 20 let newPageHeight = dataArr.reduce((countHeight, item) => { countHeight += getHeight(item) if (countHeight < totalHeight) { countArr[partIndex].push(item) } else { totalHeight = 930 countHeight = 0 partIndex++ countArr[partIndex].push(item) } return countHeight }, 0) return {countArr, newPageHeight} }, ``` ### 計算高度的方法 備注：僅供參考建議。+20為保留的每個tr行的上下padding. ``` getHeight(dataArr) { let getHeight = (data) => Math.ceil(data.length / 40) * 25 return dataArr.reduce((countHeight, item) => { countHeight += getHeight(item) // console.log(countHeight) return countHeight }, 0) + 20 } ``` ## 小結 以上是這次表格分頁小小的實踐，雖然瀏覽器打印整頁已經技術非常成熟，但是根據產品需求進行指定的分頁和一些數據的分割控制和顯示還是需要一些代碼設計的。 希望能幫助到你實現這部分需求的實現。