React中如何实现Ant Design Table打印时每页重复表头

Ant Design Table 开启纵向滚动固定表头时，会拆分为独立的表头、表体两个<table>节点，承载内容的表体节点无原生<thead>元素，浏览器打印时无法自动识别并在分页处重复表头，不需要手动操作DOM拼接节点，以下是生产环境可用的规范实现：

方案1：打印前临时切换表格配置（兼容性最好，零侵入样式） #

完全依托Antd原生渲染逻辑，不会因为版本迭代DOM结构变动失效：

• 对Table的scroll配置做状态受控，页面正常展示时保留业务需要的纵向滚动高度，实现固定表头效果
• 触发打印动作前，临时将scroll.y置为undefined，等待React重渲染完成后再唤起打印。去掉纵向滚动配置后，Antd会自动渲染为带完整<thead>、<tbody>的单个语义化table节点，浏览器原生支持打印时每页重复表头
• 监听打印结束事件，将scroll配置切回原值，恢复页面正常交互

核心实现代码：

import { Table, Button } from 'antd';
import { useState, useEffect } from 'react';

const BusinessTable = ({ columns, dataSource }) => {
  // 页面正常展示时的滚动配置，按业务需求调整高度
  const [tableScroll, setTableScroll] = useState({ y: 600 });

  const triggerPrint = () => {
    // 临时关闭固定表头，渲染完整单table结构
    setTableScroll(undefined);
    // 等待DOM更新完成后触发打印
    setTimeout(() => window.print(), 0);
  };

  useEffect(() => {
    const recoverTableConfig = () => {
      // 打印结束后恢复页面正常展示配置
      setTableScroll({ y: 600 });
    };
    window.addEventListener('afterprint', recoverTableConfig);
    return () => window.removeEventListener('afterprint', recoverTableConfig);
  }, []);

  return (
    <>
      <Button type="primary" onClick={triggerPrint}>打印报表</Button>
      <Table
        rowKey="id"
        columns={columns}
        dataSource={dataSource}
        scroll={tableScroll}
      />
    </>
  );
};

方案2：打印媒体查询覆盖样式（不需要改组件逻辑） #

如果不想改动组件状态逻辑，可以通过打印专用CSS覆盖Antd默认拆分布局，实现打印时的语义化结构：

@media print {
  /* 隐藏拆分出来的独立表头节点 */
  .ant-table-fixed-header,
  .ant-table-header {
    display: none !important;
  }
  /* 解除表体容器高度限制，关闭滚动 */
  .ant-table-body {
    overflow: visible !important;
    height: auto !important;
    max-height: unset !important;
  }
  /* 配置表格打印分页规则 */
  .ant-table table {
    width: 100% !important;
    page-break-inside: auto;
  }
  /* 强制thead按表头组渲染，触发浏览器每页重复逻辑 */
  .ant-table thead {
    display: table-header-group !important;
    break-inside: avoid;
  }
  /* 避免单行内容被拆分到两页 */
  .ant-table tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }
}

注意：该方案依赖Antd默认类名，大版本升级时需要校验样式是否生效。

避坑说明 #

• 不要通过原生DOM操作手动合并thead、tbody节点：Antd在拆分的两个table上绑定了列宽同步、滚动监听、固定列定位等逻辑，手动拼接节点极易导致样式错位、交互异常，且版本迭代时DOM结构、类名变动后会直接失效
• 如果表格同时使用了固定列（fixed）配置，打印前可临时关闭fixed属性，避免固定列浮层在打印时出现位置偏移
• 不建议引入第三方打印类库做DOM转换，会额外增加包体积，且容易出现样式丢失问题

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