在多页上打印时，如何使HTML表格页脚占据每页上的可用空间？

Question

我喜欢在多页上打印一张很长的桌子。 在每个页面上，我都有一个固定的页眉，正文部分具有随机高度的多个条目以及页脚。 随机条目不应跨页，并且页脚应使用可用的剩余空间。 我创建了带有打印按钮的示例代码。 当我单击打印按钮时，我希望橙色框在其前一个红色框之后立即开始，并将所有空间移到页面底部。 任何想法如何解决该问题？

 const main = document.querySelectorAll(".table-body")[0]; const newDiv = document.createElement("div"); for (let i = 0; i < 30; i++) { newDiv.innerHTML += `<div class="box" style="height: ${getRandomIntInclusive(120,250)}px">Line ${i+1} </div>` } main.appendChild(newDiv); document.getElementById("print").addEventListener("click", () => { window.print(); }); function getRandomIntInclusive(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; } 

 table { width: 100%; border: 1px solid blue; padding: 10px; } .table-body { border: 1px dashed green; padding: 10px; } .box { border: 1px solid red; page-break-inside: avoid; } table > tfoot > tr > td { border: 2px solid orange; } .table-footer { border: 1px solid black; min-height: 100px; vertical-align: top; } @media print { @page { size: letter; } #print { display: none; } } 

 <button id='print'>Print</button> <table> <thead> <tr> <th> Header </th> <tr> </thead> <tbody> <tr> <td> <div class='table-body'></div> </td> <tr> </tbody> <tfoot> <tr> <td> <div class='table-footer'>Footer</div> </td> <tr> </tfoot> </table> 

Answer 1

我无法使用表格解决问题，所以最终使用div解决了我的问题。 我跟踪每个页面上div的随机高度，并将剩余空间分配给页脚。 我的页脚有一些最小高度限制，以确保每页上都有一个页脚。 每个页面的内容都放在另一个div中，以使我可以更好地控制每个页面的样式； 例如： page-break-after和overflow 。 该解决方案并不理想，希望有人能提供更好的方法，但可以满足我目前的需求。 您可以在下面找到更新的代码：

 const main = document.getElementById("main"); const newDiv = document.createElement("div"); const paperHeight = 11 // paper height in inch const paperMargin = 1; // sum of top and bottom paper margins in inch const overflow = 0.11; // used to protect page overflow to the next page const dpi = 96; // Display dots per inch (DPI) const maxHeight = (paperHeight - paperMargin) * dpi; // max page height const footerMinHeight = 40; // Min height of footer const headerHeight = 100; // Height of header in px const numOfItems = 20; // Number of items let j = 0; let items = ''; let pageCount = 1; do { items += `<div class="page" style="max-height: ${paperHeight - paperMargin - overflow}in"><div class="box header" style="height: ${headerHeight}px">Page ${pageCount} - Header</div>`; let pageHeight = headerHeight; do { const elementHeight = getRandomIntInclusive(60, 250); if (elementHeight + pageHeight > maxHeight - footerMinHeight || j === numOfItems) { items += `<div class="box footer" style="height: ${maxHeight - pageHeight}px">Footer</div></div>`; break; } else { pageHeight += elementHeight; j++; } items += `<div class="box" style="height: ${elementHeight}px">Item ${j} </div>`; } while (j <= numOfItems) pageCount++; } while (j < numOfItems) newDiv.innerHTML = items; main.appendChild(newDiv); document.getElementById("print").addEventListener("click", () => { window.print(); }); function getRandomIntInclusive(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; } 

 * { box-sizing: border-box; } .page { border: 1px dashed green; page-break-after: always; overflow: hidden; } .box { border-bottom: 1px solid red; } .header { background: #e6ffe6 } .footer { background: #fdfed6; } @media print { @page { size: letter; margin: 0.5in; } #print { display: none; } } 

 <button id='print'>Print</button> <div id='main'></div>