React配合Puppeteer打印表格时跨页后rowspan单元格文本丢失如何解决

这个问题的核心是Chromium内核（Puppeteer底层依赖）的默认打印渲染逻辑：带rowspan属性的跨页单元格，只会在该单元格的起始渲染页展示文本内容，后续分页的对应位置不会自动重复内容，可通过以下几个落地方案解决：

方案1：预处理表格结构拆分rowspan单元格（兼容性最好） #

• 提前计算每个带rowspan的单元格覆盖的所有行的总高度，结合你在Puppeteer中设置的PDF每页可打印区域高度，把会跨页的rowspan单元格拆分为多个独立的td，所有拆分后的td填充相同的内容、保持和原单元格一致的对齐、边框样式。
• 给拆分后的非首行td添加自定义类，在屏幕显示时隐藏，打印时显示，既不影响页面正常渲染，也能满足打印需求，示例样式如下：

/* 屏幕展示状态隐藏拆分的重复单元格 */
@media screen {
  .print-repeat-cell {
    visibility: hidden;
    height: 0;
    padding: 0;
    border: none;
  }
}
/* 打印状态展示重复单元格 */
@media print {
  .print-repeat-cell {
    visibility: visible !important;
    height: auto !important;
    padding: inherit !important;
    border: inherit !important;
  }
}

方案2：用CSS打印属性实现首列内容重复 #

• 给需要跨页重复展示的首列单元格设置running定位，通过@page规则让内容在每页固定区域重复渲染，示例代码如下：

@page {
  /* 把首列内容绑定到页面左侧顶部的打印区域 */
  @left-top {
    content: element(primary-col);
    vertical-align: middle;
  }
}
td.first-col[rowspan] {
  position: running(primary-col);
}

• 该方案需要你的Puppeteer版本不低于v19，旧版本内置的Chromium不支持running元素打印属性。

方案3：主动计算分页位置插入重复内容 #

• 在调用Puppeteer的page.pdf()方法前，先在页面执行上下文注入JS逻辑，遍历所有带rowspan的单元格，计算其覆盖的行是否会被分页截断，如果判定会跨页，就在分页截断的前一行后主动插入一个和原td内容、样式完全一致的单元格，设置为仅打印时可见。
• 可以给非跨页的普通行添加page-break-inside: avoid属性，降低分页位置计算的误差。

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