在多页上打印时，如何使 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>