PrimeNG表格使用row span导出PDF时表头重复异常如何解决

解决方案 #

直接调整CSS分页规则即可解决这两个问题，原有page-break-before: always规则是触发异常分页、产生多余边框的核心原因：

1. 替换原有thead相关CSS为以下打印专用样式，使用原生table-header-group属性实现每页自动重复表头，不需要手动强制插入分页符：

@media print {
  .ui-table table {
    table-layout: fixed !important;
    width: 100% !important;
  }
  /* 原生实现每页重复表头，无多余分页符 */
  .ui-table .ui-table-thead {
    display: table-header-group !important;
    page-break-inside: avoid !important;
  }
  .ui-table .ui-table-tbody {
    display: table-row-group !important;
  }
  /* 禁止表格行被拆分到两页 */
  .ui-table .ui-table-tbody tr {
    page-break-inside: avoid !important;
  }
  /* 修复带rowspan的表头背景色丢失问题 */
  .ui-table .ui-table-thead th[rowspan] {
    background-color: inherit !important;
    /* 若原有表头有固定背景色，也可直接写死对应色值，例如 background-color: #f5f5f5 !important; */
  }
}

2. 如果调整后第二页前仍有残留边框，可添加以下样式避免边框重叠：

@media print {
  /* 隐藏每页表头的上边框，避免和上一页底部残留边框重合 */
  .ui-table .ui-table-thead tr th {
    border-top: none !important;
  }
}

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