在每個頁面上打印一個頁面不重疊的多頁HTML表格

Question

我不知疲倦地搜索，雖然我發現很多人問這個問題，但似乎沒有任何一致的解決方案。

我們有一個用戶可以輸入日期範圍的頁面，然後按提交返回一個數據表。存在「打印」按鈕，其明顯打印生成的數據。

如預期的那樣，所有瀏覽器似乎都能夠將長表拆分爲多個頁面。我們也可以得到一些預先定義頁腳文本通過使用一個頁腳DIV像這樣一些CSS來顯示每一頁上：

.footer { 
    position: fixed; 
    bottom: 0; 
} 

唯一的問題是，表中的行有不一致的高度，所以在一些網頁上有大量的的頁腳空間，但在其他頁面上，表格和頁腳重疊。

事情我已經嘗試：

@page { 
    margin-bottom: 10mm; 
} 

增加保證金，但頁腳的bottom: 0;固定的位置現在被認爲太高了，即仍然有重疊，但與在一堆空間頁面底部。將bottom屬性設置爲負值只會使其出現在下一頁的頂部。

@page { 
    padding-bottom: 10mm; 
} 

根本沒有明顯的效果。

...這幾乎所有我能想到的。我們能做些什麼呢？我們是否需要某種自定義JS解決方案來計算每個頁面上的行數並手動插入頁腳？必須有一個在打印頁腳方面取得成功的人;它似乎並不是一個不常見的要求。

Answer 1

有可能是一個更好的解決方案，但你可以沿着線的一種算法爲此在JS：

while there is still vertical room left... 
    output a row to DOM 
    measure height of new row and recalc how much vertical room is left 

爲了得到一個元素的高度，你可以看看this other answer。

這可能看起來像一個痛苦，但你會有很多控制你的渲染，它應該工作正常。

Answer 2

請儘量在CSS文件的底部或者在最後body影響規則最終也!important添加補充一點：

@media print { 
    body { 
    padding-bottom: 10mm; 
    } 
}