如何避免List Rows操作结果打印时被拆分到多个页面？

核心问题分析 #

你当前用单个<tr>容纳所有生成的<td>，浏览器渲染时会把所有单元格挤在一行，但打印引擎会判定这个超长行无法在单页容纳，从而强制分页。重复调用List Rows会重复数据，因为每次调用都是从头取12条，而非续取下一组数据。

替代方案：用Flex/Grid实现流式布局（推荐） #

放弃表格布局，改用CSS Flexbox或Grid，它们能自动根据容器宽度换行，且更容易控制打印分页行为，无需固定每行数量，完全适配A4纸张宽度。

代码示例（内嵌CSS） #

<style type="text/css">
/* 基础布局：flex容器自动换行 */
.person-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 图片间的间距，可按需调整 */
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
}

/* 单个人员卡片样式 */
.person-card {
  width: calc(25% - 10px); /* 每行4个，减去gap宽度，可调整百分比适配每行数量 */
  text-align: center;
  page-break-inside: avoid; /* 禁止卡片被分页拆分 */
}

.person-card img {
  width: 100%;
  max-height: 123px; /* 保持图片高度一致 */
  object-fit: contain; /* 避免图片变形 */
}

.person-name {
  margin-top: 5px;
  font-size: 12px;
  text-align: center;
}

/* 打印专属设置 */
@media print {
  body {
    margin: 0;
    padding: 0;
  }
  .person-grid {
    gap: 8px; /* 打印时缩小间距节省空间 */
  }
  /* 指定打印纸张参数 */
  @page {
    size: A4 portrait; /* 纸张方向可改为landscape横向 */
    margin: 1cm; /* 设置页边距 */
  }
}
</style>

<div class="person-grid">
  <!-- 直接遍历所有数据，无需固定Rows数量 -->
  <List Rows=All>
    <div class="person-card">
      <img src="<Picture>" />
      <p class="person-name"><Name></p>
    </div>
  </List>
</div>

代码说明 #

1. Flex布局：.person-grid作为flex容器，flex-wrap: wrap让卡片自动换行，无需手动控制每行数量，完全适配纸张宽度。
2. 分页控制：page-break-inside: avoid确保单个人员卡片不会被拆分到两页。
3. 打印适配：@media print和@page规则专门针对打印场景设置纸张尺寸、边距，优化布局。
4. 动态宽度：calc(25% - 10px)实现每行4个卡片，你可以调整百分比（比如33%对应每行3个）适配需求。

如果必须用表格布局的修正方法 #

如果你因业务限制必须用表格，需要让List Rows按行拆分数据（比如每12个生成一个<tr>），但这个方法依赖你的List Rows是否支持指定起始位置：

<style type="text/css">
table { page-break-inside: avoid; }
tr { page-break-inside: avoid; }
#container { width: 100px; }
#text { text-align: center; }
</style>

<table>
  <tr>
    <List Rows=12>
      <td><div id="container">
        <img src="<Picture>" height="123px"/>
        <p id="text"><Name></p>
      </div></td>
    </List>
  </tr>
  <!-- 仅当List Rows支持Start参数时可用，避免重复数据 -->
  <!-- <tr>
    <List Rows=12 Start=13>
      <td><div id="container">
        <img src="<Picture>" height="123px"/>
        <p id="text"><Name></p>
      </div></td>
    </List>
  </tr> -->
</table>

打印设置建议 #

• 在浏览器打印窗口中，确保不勾选"背景图形"（若图片不显示时调整）。
• 选择**"适应页面宽度"或"100%"缩放比例**，避免内容被截断或放大。
• 确认纸张尺寸为A4，方向根据布局选择纵向/横向。

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