前端如何讓網頁打印時每一頁都有固定的頭部，且在達到固定高度時自動分頁

頁面效果：

第一頁

第N頁

業務需求：

1.網頁點擊打印時，打印渲染的頁面每一頁的頭部都要有公司logo；
2.並且分頁時不能讓某一行的表格斷開（必須在達到固定高度時讓頁面自動分頁）；

爲了實現上述需求，過程可謂心塞
我首先嚐試着讓每一頁的頭部都能打印出相同的東西，
原本想偷個懶，藉助瀏覽器自帶的打印設置功能，卻發現行不通行不通
谷歌雖然也有設置頁眉頁腳的功能，可是它有本身固定的格式，根本設置不了本身想要的內容

頁眉

頁腳

谷歌不行，我仍是不死心，就是想用現成的東西來實現，因此呢
我又去嘗試火狐，驚喜不，火狐能夠設置頁眉頁腳，然而
並無什麼*用，又加不進去logo，而後呢
我確定又去試了一下IE（哼哼，仍是不行，我就不截圖演示了）

好吧，我終於有一點點死心了，仍是我本身來搞吧，接着就是各類百度，找方法，看別人的代碼。
中間嘗試過這種方法：https://codeday.me/bug/20170302/3239.html

這種方法是我當時能找到的我以爲最需求的方法，可是它有一個讓人沒法容忍的缺點，
打印渲染時，每一頁的頭部會和內容重合在一塊兒，這顯然是不行的！

因此最後仍是得從新研究其餘方法：
最後達成目的的思路是：
1.首先在頁面佈局的時候，去獲取每一行表格內容的高度相加再加上其餘固定部分的高度，
若是超過某個高度（這個高度大體等於打印時頁面的高度）就添加你想要的頭部html結構
2.在這個高度到達時，就讓打印頁面自動分頁，這個能夠經過
page-break-before：always這個css屬性來實現

html結構：

css樣式：

js部分：