Firefox打印时-moz-transform无效，如何避免header分页并让details新页打印

问题背景 #

现有两个表格：#header 和 #details，需求如下：

• #details 必须始终在新页打印
• #header 需完整显示在单页内，禁止跨页

Chrome 中通过缩放 body 解决了 header 内容溢出分页的问题，但 Firefox 中使用 -moz-transform: scale() 无效（分页仍基于原始布局尺寸），给 header 最后一行加 break-before: avoid 也未生效。

解决方案 #

方案1：使用打印媒体查询 + page-break-inside: avoid #

Firefox 对表格的分页控制需针对整个表格设置，而非单独行。通过打印媒体查询给 #header 添加禁止内部分页的规则，同时确保 #details 强制新页：

@media print {
  /* 禁止 header 表格内部分页 */
  #header {
    page-break-inside: avoid;
    width: 100%;
    border-collapse: collapse; /* 消除表格内部额外间距 */
  }

  /* 强制 details 表格从新页开始 */
  #details {
    break-before: always;
    /* 兼容旧版 Firefox 可补充：page-break-before: always; */
  }
}

方案2：调整打印页边距腾出空间 #

如果 header 内容接近页面高度，可通过 @page 规则减小打印页边距，无需缩放即可放下全部内容：

@media print {
  /* 调整打印页边距（默认可能较大，按需修改） */
  @page {
    margin: 1cm;
  }

  #header {
    page-break-inside: avoid;
    width: 100%;
  }

  #details {
    break-before: always;
  }
}

方案3：容器包裹 + 禁止容器内分页 #

Firefox 对直接作用于表格的 page-break-inside 支持可能存在差异，可给 #header 外层包裹一个容器，给容器添加禁止分页规则：

<div class="header-container">
  <table id="header">
    <!-- 表格内容 -->
  </table>
</div>
<table id="details" style="break-before: always;">
  <!-- 表格内容 -->
</table>

对应 CSS：

@media print {
  .header-container {
    page-break-inside: avoid;
    display: block;
  }

  #header {
    width: 100%;
  }

  #details {
    break-before: always;
  }
}

方案4：JS 动态缩放表格（终极方案） #

若上述 CSS 方案均无效，可通过 JS 动态计算 header 高度与打印页面可用高度的比例，单独缩放表格而非整个 body，Firefox 会基于缩放后的尺寸重新计算分页：

function adjustHeaderForPrint() {
  if (window.matchMedia('print').matches) {
    const header = document.getElementById('header');
    // 计算打印页面的可用高度（扣除页边距）
    const pageStyle = getComputedStyle(document.querySelector('@page'));
    const pageHeight = window.innerHeight - 
                      parseFloat(pageStyle.marginTop) - 
                      parseFloat(pageStyle.marginBottom);
    const headerHeight = header.offsetHeight;

    // 若 header 高度超过可用高度的90%，动态缩放
    if (headerHeight > pageHeight * 0.9) {
      const scaleFactor = (pageHeight * 0.9) / headerHeight;
      header.style.transform = `scale(${scaleFactor})`;
      header.style.transformOrigin = 'top left';
      header.style.width = `${100 / scaleFactor}%`; // 保持表格宽度适配页面
    }
  }
}

// 监听打印前事件，执行调整
window.addEventListener('beforeprint', adjustHeaderForPrint);

关键说明 #

• Firefox 中 transform: scale() 作用于 body 时，分页计算仍基于原始布局尺寸，因此需针对 header 单独缩放。
• break-before: avoid 对表格行无效，因为表格是一个整体布局单元，需给整个表格或外层容器设置禁止分页规则。

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