Edge浏览器打印React页面时table的thead被footer重叠求助

在使用Edge浏览器打印React.js前端页面时，出现表格thead被页面Footer（after-data-footer元素）重叠的问题，Chrome浏览器下无此现象。

相关代码与样式 #

打印样式（print.scss） #

@media screen {
  .printOnly {
    display: none;
  }
}

@media print {
  .noPrint,
  .hiddenNotSticky {
    display: none !important;
  }

  .printOnly {
    display: block;
  }

  .sticky,
  .stuck {
    position: relative !important;
  }

  @page {
    size: auto;
    margin: 20mm 10mm 20mm 20mm;
  }

  body,
  #main,
  #app {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    min-height: initial;
    max-height: 100%;
    font-size: 12pt;
  }

  wb-notification {
    display: none;
  }

  wb-grid {
    padding: 0 !important;
  }

  header,
  footer {
    background-color: white !important;
    position: relative !important;
  }

  .MuiAccordion-root {
    & > div {
      height: auto !important;
      visibility: visible !important;
      overflow: visible;
    }

    .MuiCollapse-root {
      .subsection {
        padding: 12pt 0;
      }
    }

    .MuiAccordionSummary-root {
      background-color: white !important;

      .MuiBox-root {
        background-color: white !important;
      }

      .MuiButtonBase-root {
        display: none;
      }
    }
  }
}

问题表格代码 #

<table
  className={`xyz-table xyz-table--border-horizontal ${styles.furtherContractsTable}`}
>
  <thead>
    <tr>
      <th scope="col" className={styles.tableHead}>
        {t("companyData")}
      </th>
      <th scope="col" className={styles.tableHead}>
        {t("companyData")}
      </th>
      <th scope="col" className={styles.tableHead}>
        {t("companyData")}
      </th>
      <th scope="col" className={styles.tableHead}>
        {t("companyData")}
      </th>
      <th scope="col" className={styles.tableHead}>
        {t("companyData")}
      </th>
      <th scope="col" className={styles.tableHead}>
        {t("companyData")}
      </th>
    </tr>
  </thead>
  <tbody>
    {(companyData || []).map((companyData, companyData) => (
      <tr
        className={styles.tableRow}
        key={companyData}
        onClick={() => {
          browserHistory.push(`companyData`);
        }}
      >
        <td>
          {companyData}
          {!_.isNil(companyData) && (
            <span className={styles.additionalContractSource}>
              {companyData}
            </span>
          )}
        </td>
        <td>
          {r.bool(_.isNil(companyData) ? false : companyData)}
        </td>
        <td>{companyData}</td>
        <td>{companyData}</td>
        <td>{companyData}</td>
        <td>
          {r.date(companyData)}
          {" / "}
          {r.date(companyData)}
        </td>
      </tr>
    ))}
  </tbody>
</table>

表格相关样式 #

@import "company/core/dist/scss/utility";

.furtherContractsTable {
  td,
  th {
    font-size: 1rem !important;
  }
}

.tableHead {
  border-top: none !important;

  &:first-child {
    padding-left: 0;
  }

  &:last-child {
    padding-right: 0;
  }
}

.tableRow {
  &:hover {
    cursor: pointer;
    background: var(--xyz-grey-90);
  }

  td:first-child {
    padding-left: 0;
  }

  td:last-child {
    padding-right: 0;
  }

  &:last-child {
    border-bottom: 1px solid var(--xyz-grey-70);
  }
}

.paginationWrapper {
  display: flex;
  justify-content: center;
  margin: var(--xyz-spacing-xs) 0;
}

.additionalContractSource {
  &::before {
    content: " (";
    white-space: pre;
  }

  &::after {
    content: ")";
  }

  color: var(--xyz-grey-45);
}

Footer组件代码 #

function Footer() {
  const { t } = useTranslation();
  const { user } = useStoreon<StoreState, StoreEvents>("user");
  const currentYear = new Date().getFullYear();
  const authenticated = Object.keys(user).length > 0;

  return (
    <footer className={styles.footer}>
      <GridContainer>
        <XYZGridRow>
          <XYZGridCol mq1={12} allowOverflowX>
            <div className={styles.footerContainer}>
              <div className={styles.logoWrapper}>
                <div className={styles.logo}>
                  <img
                    src={logo}
                    height={18}
                    alt="companyData"
                    className="noPrint"
                  />
                  <img
                    src={logoBlack}
                    height={18}
                    alt="companyData"
                    className="printOnly"
                  />
                </div>
                <p className={styles.copyright}>
                  {t<string>("companydata", {
                    currentYear: currentYear,
                  })}
                </p>
              </div>
            </div>
          </XYZGridCol>
        </XYZGridRow>
      </GridContainer>
    </footer>
  );
}

export default memo(Footer);

Footer相关样式 #

.footer {
  color: var(--xyz-white);
  background-color: var(--xyz-black);
  z-index: 1202;
  @include xyz-type-button-secondary;
}

.footerContainer {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;

  @include breakpoint-from(mq5) {
    flex-direction: row;
    justify-content: space-between;
  }
}

.logoWrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-bottom: var(--xyz-spacing-xxs);

  @include breakpoint-from(mq5) {
    padding: 0;
    flex-direction: row;
  }
}

.logo {
  display: flex;
  align-items: center;
}

1. 调整打印样式中的表格与Footer定位 #

Edge的打印渲染逻辑和Chrome存在差异，需针对性调整样式：
在print.scss的@media print区块中添加：

/* 避免表格被分页截断，强制thead作为表头组渲染 */
table {
  page-break-inside: avoid;
}
thead {
  display: table-header-group;
}

/* 给表格底部添加margin，防止被Footer覆盖 */
.furtherContractsTable {
  margin-bottom: 60px; /* 根据实际Footer高度调整 */
}

/* 修正Footer打印定位，固定在页面底部 */
footer {
  position: fixed;
  bottom: 0;
  width: calc(100% - 30mm); /* 匹配@page的左右边距（10mm+20mm） */
  height: auto;
}

2. 清除thead的sticky残留样式 #

即使全局设置了.sticky为relative，仍需单独给thead添加打印样式：

@media print {
  thead {
    position: relative !important;
    z-index: 1;
  }
}

3. 调整页面边距 #

当前@page底部边距可能不足，增大给Footer预留空间：

@page {
  size: auto;
  margin: 20mm 10mm 35mm 20mm;
}

4. 手动添加分页标记 #

如果表格跨页严重，可在表格后添加分页元素：

{/* 表格代码后添加 */}
<div className="print-page-break"></div>

然后在print.scss中添加：

@media print {
  .print-page-break {
    page-break-after: always;
  }
}

优先尝试前两个方案，大部分Edge打印重叠问题都能通过调整定位和边距解决。

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