打印格式中签名区跳至下页时，将最后1-2行数据移至下页

由于只能使用HTML和CSS，我们可以通过拆分表格+强制内容不拆分的方式实现需求，核心思路是让签名区域和表格的最后一行绑定在一起，避免签名区单独出现在下一页。

实现步骤 #

1. 动态拆分商品表格 #

在ERPNext的打印模板中，将商品表格拆分为两部分：

• 主体表格：包含除最后一行外的所有商品数据
• 尾部表格：仅包含最后一行商品数据（如果表格只有1行，则直接将整个表格作为尾部表格）

2. 绑定尾部表格与签名区域 #

用一个容器包裹尾部表格和签名区域，通过CSS强制该容器内的内容不会被分页拆分。

3. 打印样式优化 #

添加打印专属的CSS样式，确保容器内容不被拆分，同时让拆分后的两个表格看起来像一个完整的表格。

代码示例 #

HTML结构（ERPNext打印模板语法） #

<!-- 头部区域 -->
<div class="print-header">
  <!-- 头部动态数据 -->
</div>

<!-- 商品表格主体部分 -->
<table class="item-table">
  <thead>
    <tr>
      <th>商品名称</th>
      <th>数量</th>
      <th>单价</th>
      <th>金额</th>
    </tr>
  </thead>
  <tbody>
    <!-- 循环渲染除最后一行外的商品 -->
    {% for item in doc.items[:-1] %}
    <tr>
      <td>{{ item.item_name }}</td>
      <td>{{ item.qty }}</td>
      <td>{{ item.rate }}</td>
      <td>{{ item.amount }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<!-- 绑定尾部表格与签名区的容器 -->
<div class="keep-together">
  <!-- 商品表格尾部（最后一行） -->
  {% if doc.items|length > 0 %}
  <table class="item-table">
    <tbody>
      <tr>
        <td>{{ doc.items[-1].item_name }}</td>
        <td>{{ doc.items[-1].qty }}</td>
        <td>{{ doc.items[-1].rate }}</td>
        <td>{{ doc.items[-1].amount }}</td>
      </tr>
    </tbody>
  </table>
  {% endif %}

  <!-- 签名区域 -->
  <div class="signature-block">
    <div style="float: right; margin-top: 50px;">
      <p>经办人签名：_________________</p>
      <p>日期：_________________</p>
    </div>
    <div style="clear: both;"></div>
  </div>
</div>

CSS样式（打印专属） #

@media print {
  /* 强制容器内内容不被分页拆分 */
  .keep-together {
    page-break-inside: avoid;
    break-inside: avoid; /* 兼容CSS3标准，适配更多浏览器 */
  }

  /* 表格样式统一，让拆分后的表格看起来是一个整体 */
  .item-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
  }

  .item-table th, .item-table td {
    border: 1px solid #000;
    padding: 6px 8px;
    text-align: left;
  }

  /* 隐藏主体表格的底部边框，与尾部表格无缝衔接 */
  .item-table tbody tr:last-child td {
    border-bottom: none;
  }

  /* 隐藏尾部表格的顶部边框，与主体表格无缝衔接 */
  .keep-together .item-table tbody tr:first-child td {
    border-top: none;
  }
}

边界情况处理 #

• 当表格只有1行时：整个表格会被放入keep-together容器，与签名区绑定，不会出现签名区单独分页的情况。
• 当表格行数较多占满一页时：尾部表格和签名区会自然进入下一页，满足“至少一行数据移至下一页”的要求。
• 浏览器兼容性：通过同时设置page-break-inside和break-inside属性，覆盖大部分主流浏览器的打印渲染逻辑。

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