打印PDF前动态修改React组件内容 无需重写组件且原有UI不受影响

完全可以在现有generatePDFSummaryPage函数中实现需求，无需重写单独的导出组件，也不会影响原有页面的UI展示，核心思路是导出前临时修改状态和DOM、导出完成后立即还原，整个过程耗时极短，用户肉眼完全感知不到页面变化。

前置准备 #

先做两个无业务侵入性的小调整：

• 给所有不需要导出的元素（比如你的Print Summary链接）添加统一的自定义类名，比如pdf-export-hidden
• 确认你使用的antd Collapse组件为受控模式，把activeKey绑定到组件state中，方便后续通过状态控制面板的展开/收起

具体代码实现 #

直接修改你的generatePDFSummaryPage函数即可：

generatePDFSummaryPage = async () => {
  // 1. 备份原有折叠面板状态，将所有折叠面板设置为展开
  const originalCollapseKey = this.state.collapseActiveKey;
  // 数组内填入你所有折叠项的key，即可实现全部展开
  this.setState({ collapseActiveKey: ['1', '2', '3'] });

  // 2. 临时隐藏所有不需要导出的元素
  const hideElements = document.querySelectorAll('.pdf-export-hidden');
  hideElements.forEach(el => el.style.display = 'none');

  // 等待状态更新和DOM渲染生效，100毫秒完全不会被用户感知
  await new Promise(resolve => setTimeout(resolve, 100));

  // 3. 触发PDF导出
  await this.myRef.current.save();

  // 4. 导出完成后立即还原所有状态和DOM
  this.setState({ collapseActiveKey: originalCollapseKey });
  hideElements.forEach(el => el.style.display = '');
}

补充说明 #

• 如果你的折叠项数量不固定，可以提前遍历所有折叠项的key生成全量的activeKey数组，不需要硬编码
• 如果担心setState异步的问题，可以把后续逻辑放到setState的回调函数中执行，逻辑效果完全一致
• 该方案不会对原有页面的交互和展示产生任何影响，也不需要额外维护一套导出专用的组件代码

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