打印含多层ng-repeat的Widget HTML模板时首页空白求助

问题现象 #

• 用包含<tbody>的<table>构建报表Widget，需遍历日期、预订信息及服务项目
• 页面显示正常，但打印时始终出现空白首页
• 移除第二、三层ng-repeat后打印正常，添加第二层ng-repeat时问题复现
• 尝试在客户端脚本生成标记再展示（注释代码），问题依然存在，已排除ng-repeat本身的影响
• 原本使用固定页眉页脚，完全移除后问题仍存在

数据结构示例 #

{
  "meta": {
    "run_date": "10/06/2024 13:54:49",
    "from": "14/06/2024",
    "to": "17/06/2024"
  },
  "business_team": "Team 1 | Team 2",
  "dates": [
    {
      "value": "Saturday, 15 June, 2024",
      "reservations": [
        {
          "sys_id": "a744889f1ba602100797ed79b04bcb03",
          "location": "Room123",
          "subject": "A new day, a new population of text in the subject field",
          "requested_for": "Smith, John",
          "attendees": 10,
          "additional_info": "This is the additional information",
          "service_items": [
            {
              "start": "15/06/2024 15:00:00",
              "end": "15/06/2024 16:00:00",
              "quantity": "14",
              "category": "Equipment",
              "name": "Mouse",
              "comment": "This is the comment field"
            }
          ]
        }
      ]
    }
  ]
}

HTML模板 #

<div class="container-fluid">
  <table>
    <thead>
      <tr>
        <td>
          <header class="page-header">
            <div class="logo">
              <img src="logo.png" width="50" height="50"/>
            </div>

            <div class="header-text">
              <span>Room Booking Details with Add-ons</span><br />{{ reportContent.business_team }}
            </div>

            <div class="address">
              xxx<br />xxx<br />xxx
            </div>

            <div class="column-header">
              <span>Start</span>
              <span>End</span>
              <span>Items</span>
              <span>Item comments</span>
            </div>
          </header>
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <!--<span ng-bind-html="content"></span>-->
          <div ng-repeat="date in reportContent.dates track by $index">
            <header class="date-banner">
              {{date.value}}
            </header>
            <section class="reservation" ng-repeat="reservation in date.reservations track by $index">
              <div class="room-subject">
                <span>{{ reservation.location }}</span>: {{ reservation.subject }}
              </div>
              <div class="name-attendees">
                <span>{{ reservation.requested_for }}</span>
                <span class="text-right">{{ reservation.attendees }} Attendees</span>
              </div>

              <div class="additional-info">
                <p ng-bind-html="reservation.additional_info"></p>
              </div>

              <div class="service-items" ng-repeat="item in reservation.service_items">
                <span>{{ item.start }}</span>
                <span>{{ item.end }}</span>
                <span>{{ item.quantity }} x {{ item.category }} - {{ item.name }}</span>
                <span ng-class="{empty:!item.comment}">{{ item.comment }}</span>
              </div>
              
            </section>
          </div>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>
          <!--place holder for the fixed-position footer-->
          <footer class="page-footer-space"></footer>
        </td>
      </tr>
    </tfoot>
  </table>

  <footer class="page-footer">
    <spa>Generated: {{ reportContent.meta.run_date }}</spa>
        <span>From {{ reportContent.meta.from }} to {{ reportContent.meta.to }}</span>
    <span>Room Booking Details with Add-ons for {{ reportContent.business_team }}</span>
  </footer>
  
</div>

解决方案建议 #

1. 重构表格布局，避免单单元格嵌套大量内容 #

当前<tbody>内仅一个<tr>，所有内容塞进单个<td>，打印时浏览器分页逻辑易出错。建议将循环拆分到表格行中：

<tbody>
  <!-- 日期行 -->
  <tr ng-repeat="date in reportContent.dates track by $index">
    <td colspan="4">
      <header class="date-banner">{{date.value}}</header>
    </td>
  </tr>
  <!-- 预订信息行 -->
  <tr ng-repeat="reservation in date.reservations track by $index">
    <td colspan="4">
      <div class="room-subject">
        <span>{{ reservation.location }}</span>: {{ reservation.subject }}
      </div>
      <div class="name-attendees">
        <span>{{ reservation.requested_for }}</span>
        <span class="text-right">{{ reservation.attendees }} Attendees</span>
      </div>
      <div class="additional-info" ng-if="reservation.additional_info">
        <p ng-bind-html="reservation.additional_info"></p>
      </div>
    </td>
  </tr>
  <!-- 服务项目行 -->
  <tr ng-repeat="item in reservation.service_items">
    <td>{{ item.start }}</td>
    <td>{{ item.end }}</td>
    <td>{{ item.quantity }} x {{ item.category }} - {{ item.name }}</td>
    <td ng-class="{empty:!item.comment}">{{ item.comment || '-' }}</td>
  </tr>
</tbody>

2. 添加打印专属CSS，消除隐性空白 #

在样式中针对打印媒体类型，强制重置边距并优化分页：

@media print {
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
  }
  .container-fluid {
    page-break-before: avoid;
  }
  table {
    page-break-inside: avoid;
    border-collapse: collapse;
    width: 100% !important;
  }
  /* 移除可能触发分页的冗余边距 */
  .page-header, .date-banner, .reservation {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  /* 隐藏打印不需要的元素 */
  .page-footer-space {
    display: none;
  }
}

3. 排查隐藏的分页触发元素 #

用浏览器打印预览的元素检查工具，查看首页空白区域对应的DOM节点，确认是否有设置page-break-before: always的元素，或存在高度为0但占用空间的隐藏块级元素，直接移除或修改其样式。

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