CSS column-count导致PDF打印仅显第一页的问题及替代方案咨询

一、异常原因排查 #

• Chromium引擎版本变更：Chrome/Edge v126基于Chromium 126，该版本对多列布局（column-count）在打印场景下的元素渲染逻辑做了调整，尤其是跨列块级元素（如表格）的分页计算规则，导致后续列的内容未被识别为可打印区域。
• 表格与多列布局的兼容性bug：表格作为固定结构的块级容器，在行数可变的情况下，新版本引擎对column容器的高度计算出现偏差，后续列的内容被判定为超出打印范围，仅渲染第一页。
• 打印样式冲突：检查@media print规则中是否存在overflow: hidden、height: 100%等强制限制容器高度的样式，这类样式会意外截断后续内容。

二、替代布局方案 #

方案1：CSS Grid自动流式布局 #

通过Grid实现多列流式排列，表格会自动填满每一列空间，自然衔接无间隙，完全适配打印场景：

<div class="grid-container">
  <table class="data-table">
    <thead><tr><th>表头1</th><th>表头2</th></tr></thead>
    <tbody>
      <tr><td>内容1</td><td>内容2</td></tr>
      <tr><td>内容3</td><td>内容4</td></tr>
      <!-- 可变行数内容 -->
    </tbody>
    <tfoot><tr><td>页脚1</td><td>页脚2</td></tr></tfoot>
  </table>
  <!-- 更多重复表格 -->
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 按需调整列数 */
  gap: 0;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
/* 打印场景优化 */
@media print {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }
  body {
    margin: 0;
  }
}

方案2：多列布局兼容补丁（针对v126临时修复） #

如果不想替换布局，可尝试添加打印专属样式修复引擎bug：

@media print {
  .column-container {
    column-fill: auto;
    height: auto !important;
  }
  .data-table {
    break-inside: auto; /* 取消之前的avoid限制，让引擎正确计算分页 */
  }
}

方案3：手动拆分表格（行数可控场景） #

若表格行数可预估，将每个表格拆分为对应列数的子表格，通过inline-block排列，确保每列内容衔接：

.split-table {
  display: inline-block;
  width: 50%; /* 2列布局 */
  border-collapse: collapse;
}

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