当在多个页面上打印时，如何使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中，以使我更好地控制每个页面的样式；例如:分页后和溢出。这个解决方案并不理想，希望有人提出更好的解决方案，但它满足了我目前的需要。下面可以找到更新的代码：

​

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>

​