HTML打印时能否在页面结束前设置分页？长表格溢出列如何换页

主动分页支持说明 #

HTML打印完全支持未到页尾时主动强制分页，通过CSS打印专属属性即可实现，不需要依赖JS。
基础用法是在需要分页的位置对应的元素上添加如下属性：

@media print {
  .page-break {
    break-after: page; /* 新标准属性，优先使用 */
    page-break-after: always; /* 兼容旧浏览器的兜底属性 */
  }
}

你只需要在想要分页的位置插入一个<div class="page-break"></div>，或者直接给该位置前的最后一个元素加上这个类，就可以强制触发分页。

超宽表格列自动分页打印实现方案 #

超出宽度的列自动排到下一页打印没有开箱即用的原生CSS属性，需要结合逻辑实现，主流方案有两种：

1. 固定宽度拆分方案（纯CSS实现，适合列宽固定的场景） #

如果你的表格列宽固定，且打印纸张尺寸固定（比如默认A4纵向），可以提前计算好单页能容纳的列数，把表格拆分成多个宽度适配页面的子表格，每个子表格后加上强制分页属性即可：

@media print {
  .table-section {
    width: 210mm; /* A4纸宽度，减去边距的话可以设为190mm左右 */
    break-after: page;
  }
  .table-section:last-child {
    break-after: avoid; /* 最后一个表格后面不需要多余分页 */
  }
}

2. 自适应宽度拆分方案（JS辅助，适配不同纸张尺寸） #

如果需要兼容用户自定义的打印纸张尺寸、边距，需要用JS动态计算拆分：

1. 打印触发前先获取打印页面的可用宽度
2. 遍历表格列，累加列宽计算单页最大可展示列数
3. 按照计算结果把原表格动态拆分为多个子表格，每个子表格后加强制分页属性
4. 打印完成后恢复原表格结构即可

注意事项 #

• 表格设置table-layout: fixed可以保证列宽计算准确，避免内容撑开导致列宽超出预期
• 尽量使用Chrome、Edge浏览器触发打印，这两款浏览器对CSS打印属性的支持度最高，Firefox部分场景需要额外适配
• 不要依赖overflow-x: auto处理打印场景的超宽内容，打印时超出可视区域的内容会被直接裁切，不会自动转到下一页

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