Angular12打印每页动态表头与ngFor最后一项重叠问题咨询

你遇到的重叠、仅显示最后一项的问题，核心原因是.report-date使用了position: fixed定位：所有循环生成的表头都会固定在整个打印视口的顶部，互相重叠后只有层级最高的最后一项可见，完全不符合每页显示对应item表头的需求。

以下是分场景的解决方案： #

场景1：每个item的内容刚好占1页 #

直接移除fixed定位，配合打印媒体查询和分页规则即可，原有HTML结构不需要修改：

调整后的CSS代码 #

/* 屏幕端样式：隐藏打印专用表头 */
@media screen {
  .report-date {
    display: none;
  }
}

/* 打印专用样式 */
@media print {
  @page {
    size: A4 portrait;
    margin: 15mm 10mm;
  }

  .report-date {
    display: flex !important;
    position: relative !important;
    margin-bottom: 20px;
  }

  /* 分页规则 */
  .break-after {
    page-break-after: always;
    break-after: page;
  }
  /* 最后一项不要额外分页 */
  .item-view:last-child {
    page-break-after: avoid;
    break-after: avoid;
  }
}

/* 公共样式：移除原有的fixed相关配置 */
.report-date {
  flex-basis: 100%;
  background-color: green;
  font-size: 18px;
  flex-wrap: wrap;
  padding: 0;
  color: white;

  .content-area {
    max-width: 1170px;
    margin: 0 auto;
    position: relative;
    width: 100%;
  }
}

场景2：单个item内容可能跨多页，需要同个item的所有页都显示对应表头 #

用HTML表格的thead特性实现，浏览器打印时会自动在每个新页重复thead的内容：

调整后的HTML代码 #

<div class="item-view break-after " *ngFor="let item of selectedItems; let i = index">
  <table class="item-print-table">
    <thead>
      <tr>
        <th>
          <div class="report container">            
            <div class="report-date">
              <div class="content-area">
                <span class="size-13 uppercase">Date:</span>
                <span class="uppercase"> {{ date?.displayLong }}</span>
                <span class="pull-right">
                  <span class="size-13 uppercase" > Item: </span> 
                  {{item.firstName}} {{item.lastName}} -  {{item.code}}
                </span>
              </div>
            </div>
          </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <!-- 原有item的内容放在此处 -->
          <div> content </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

补充CSS代码 #

在场景1的CSS基础上新增以下配置：

@media print {
  .item-print-table {
    width: 100%;
    border-collapse: collapse;
  }
  thead {
    display: table-header-group;
  }
}

注意事项 #

• 打印功能优先用Chrome浏览器预览验证，不同浏览器对打印规范的支持差异较大
• 不要使用position: fixed实现打印重复表头，该定位是相对于整个打印文档的视口，多个fixed元素必然重叠

内容的提问来源于stack exchange，提问作者Nidhi Mehta Sankhala