HTML/PHP场景下如何根据页面剩余可用空间控制打印表格的行数

首先要明确，服务端PHP无法直接获取浏览器渲染后的页面空间参数，需要服务端输出基础结构+前端JS计算后调整分页的组合方案，具体步骤如下：

1. 输出基础页面结构 #

不要直接循环输出所有表格行，先把所有表格数据存在前端可读取的结构里，同时输出固定的header、footer、表格容器结构：

<!-- 先输出固定页面结构 -->
<style>
/* 定义打印相关样式，固定footer位置 */
@media print {
  footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  tr {
    /* 禁止浏览器自动拆分行 */
    page-break-inside: avoid;
  }
}
</style>

<table id="print-table">
  <thead><!-- 你的表头内容 --></thead>
  <tbody id="table-body"></tbody>
</table>
<footer id="page-footer"><!-- 你的页脚内容 --></footer>

<!-- 把所有行数据输出为JS数组 -->
<script>
const allTableRows = [
<?php
// 先把所有数据读出来输出成JS数组
$rows = [];
while ($rowitem = mysqli_fetch_array($connitem)) {
  $rows[] = json_encode($rowitem['name']);
}
echo implode(',', $rows);
?>
];
</script>

2. 前端计算可用空间并渲染行 #

用JS动态逐行插入表格，每插一行就判断剩余空间是否足够放下下一行，不够就插入分页符：

const tableBody = document.getElementById('table-body');
const footer = document.getElementById('page-footer');
const tableHeader = document.querySelector('#print-table thead');
// 取打印场景下的页面高度，可根据实际纸张尺寸调整，以下为A4纸高度转px的数值
const pageHeight = 297 * 3.7795275591; 

// 计算footer、表头的固定高度
const footerHeight = footer.offsetHeight;
const headerHeight = tableHeader.offsetHeight;
// 基础可用高度 = 页面总高度 - 表头高度 - footer高度
const baseAvailableHeight = pageHeight - headerHeight - footerHeight;
let currentUsedHeight = 0;

for (let i = 0; i < allTableRows.length; i++) {
  // 先创建临时行计算单行列高
  const tempTr = document.createElement('tr');
  const tempTd = document.createElement('td');
  tempTd.textContent = allTableRows[i];
  tempTr.appendChild(tempTd);
  tableBody.appendChild(tempTr);
  const rowHeight = tempTr.offsetHeight;
  
  // 判断剩余空间是否足够放下当前行
  if (currentUsedHeight + rowHeight > baseAvailableHeight) {
    // 空间不足时移除当前行，插入分页符
    tableBody.removeChild(tempTr);
    const pageBreak = document.createElement('tr');
    pageBreak.style.pageBreakAfter = 'always';
    tableBody.appendChild(pageBreak);
    // 重置当前页已用高度，把当前行加到新页
    currentUsedHeight = 0;
    tableBody.appendChild(tempTr);
    currentUsedHeight += rowHeight;
  } else {
    currentUsedHeight += rowHeight;
  }
}

不同页面可用空间差异适配 #

如果部分页面有额外占用空间的内容（比如首页有大标题、说明文字），你可以提前定义不同页面对应的可用高度数组，渲染时按当前页码取对应高度判断即可：

// 示例：第1页可用高度750px，其余页可用高度900px
const pageAvailableHeights = [750, 900, 900, 900];
let currentPageIndex = 0;
// 后续判断时取 pageAvailableHeights[currentPageIndex] 作为可用高度即可，触发分页时currentPageIndex自增1

内容的提问来源于stack exchange，提问作者Ale MaDaMa