使用嵌套 ng-repeat 渲染多层数据时，若采用 结构进行布局，浏览器在打印模式下可能因 HTML 表格语义不合规（如缺失必要层级或非法嵌套）导致生成多余空白页；根本解法是弃用表格标签，改用语义化 + CSS 布局。

使用嵌套 `ng-repeat` 渲染多层数据时，若采用 `

` 结构进行布局，浏览器在打印模式下可能因 HTML 表格语义不合规（如缺失必要层级或非法嵌套）导致生成多余空白页；根本解法是弃用表格标签，改用语义化 `

` + CSS 布局。

在构建可打印的 AngularJS 报表组件（如房间预订详情报表）时，开发者常依赖 <table> 实现结构化排版。但当模板中包含多层 <code>ng-repeat（例如按日期 → 预订 → 服务项三级嵌套），打印引擎（尤其是 Chrome 和 Edge 的 PDF 导出模块）会对不符合规范的表格 DOM 树产生异常分页行为——典型表现为：首张打印页完全空白，内容从第二页开始正常显示。

问题根源在于 HTML 表格的严格渲染规则：

• <table> 必须直接包含 <code><thead>/<code><tbody>/<code><tfoot>； <li><code><tbody> 内必须为 <code><tr>； <li><code><tr> 内必须为 <code><td> 或 <code><th>； <li><strong>任何在 <code><tbody> 中直接插入 <code><div>、<code><header></header>、<section></section> 等非表格元素，或在 <tr> 中遗漏 <code><td> 包裹多层 <code>ng-repeat 内容，都会破坏表格完整性。即使页面渲染正常，打印样式引擎仍可能因解析失败而强制插入空白分页符。

  ✅ 正确做法：彻底移除 <table>、<code><thead>、<code><tbody>、<code><tfoot> 等语义化表格标签，改用 <code><div> 构建布局容器，并通过 CSS 控制行列流式与分页行为。以下是优化后的核心结构示例：@@######@@<p>? <strong>关键注意事项</strong>： </p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a> <p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li> <strong>禁用表格相关 CSS</strong>：确保 <code>.print-report 及其子元素未设置 display: table / table-row 等样式；

• 启用打印友好 CSS：添加如下样式以控制分页与断行：@@######@@
• 避免内联 style 干扰：如 width="50" 等属性在打印中可能失效，建议统一用 CSS 控制尺寸；
• 测试真实打印输出：勿仅依赖浏览器“打印预览”，务必导出为 PDF 验证分页效果。

总结：打印空白页问题本质是 HTML 结构与打印引擎兼容性冲突，而非 AngularJS 或数据逻辑缺陷。放弃对 <table> 的路径依赖，转向灵活、语义清晰、符合现代打印规范的 <code><div> + CSS 布局，是解决此类问题最稳健、可维护性最强的方案。</div>

<div class="container-fluid print-report">
  <!-- 页眉区域（每页固定） -->
  <header class="page-header"><div class="logo">@@##@@</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><!-- 主体数据区域（支持分页） --><main class="report-body"><div ng-repeat="date in reportContent.dates track by $index">
      <h2 class="date-banner">{{ date.value }}</h2>
      <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>
  </main><!-- 页脚占位符（用于 CSS @page margin-bottom） --><footer class="page-footer-space"></footer>
</div>

<!-- 独立页脚（每页底部显示） -->
<footer class="page-footer"><span>Generated: {{ reportContent.meta.run_date }}</span>
  <span>From {{ reportContent.meta.from }} to {{ reportContent.meta.to }}</span>
  <span>Room Booking Details with Add-ons for {{ reportContent.business_team }}</span>
</footer>

@media print {
  .print-report { page-break-inside: avoid; }
  .date-banner { break-before: page; } /* 每个日期从新页开始（可选） */
  .reservation { break-inside: avoid; } /* 避免跨页截断单条预订 */
  .page-footer { position: fixed; bottom: 0; width: 100%; }
}