React中react-to-print打印布局与window.print不一致问题求助

在React项目中实现客户尽调（KYC）表单打印功能：创建两个表单，一个供用户填写客户信息，另一个为只读展示表单。使用react-to-print的useReactToPrint钩子触发打印时，生成的布局与window.print()的正确效果不一致。

相关代码 #

打印逻辑与Ref定义 #

const componentRef = useRef();
const handlePrint = useReactToPrint({
  content: () => componentRef.current,
});

打印按钮 #

<button
  className="btn btn-light"
  variant="secondary"
  style={{ width: "10%" }}
  type="button"
  onClick={() => {
    handlePrint();
  }}
  disabled={props.loading}
>
  print
</button>

可打印表单容器及样式 #

<NonShowDiv>
  <PrintableKYCForm ref={componentRef} onClick={handlePrint} makeToast={props.makeToast} />
</NonShowDiv>

// NonShowDiv样式定义
export const NonShowDiv = styled.div`
  display: none;
  @media print {
    display: block;
  }
`;

注：该样式用于让表单仅在打印时显示。

效果对比 #

• react-to-print错误效果：布局错乱，元素排版不符合预期（如内容挤压、样式丢失）
• window.print正确效果：布局正常，表单元素排版符合设计要求

原因及解决方法 #

核心原因 #

1. react-to-print通过创建隐藏iframe渲染目标组件，你的NonShowDiv初始为display: none，在iframe环境中@media print规则可能未被正确触发，导致组件无法正常渲染样式。
2. styled-components的样式可能未完整注入到iframe中，存在作用域或加载时机问题。

解决方法 #

方法一：调整容器隐藏逻辑（推荐）

将NonShowDiv改为视觉隐藏而非完全隐藏，让组件保持渲染状态仅用户不可见，确保react-to-print能正确获取DOM和样式：

export const NonShowDiv = styled.div`
  position: absolute;
  left: -9999px;
  top: -9999px;
  visibility: hidden;
  @media print {
    position: static;
    left: auto;
    top: auto;
    visibility: visible;
  }
`;

方法二：手动控制打印前后的组件状态

在useReactToPrint配置中添加钩子，临时显示组件再恢复：

const handlePrint = useReactToPrint({
  content: () => componentRef.current,
  onBeforeGetContent: () => {
    // 打印前临时显示容器
    const container = componentRef.current?.parentElement;
    if (container) container.style.display = 'block';
  },
  onAfterPrint: () => {
    // 打印后恢复隐藏
    const container = componentRef.current?.parentElement;
    if (container) container.style.display = 'none';
  }
});

方法三：确保样式注入iframe

如果使用styled-components，可尝试：

• 将打印相关样式放入全局CSS文件，而非仅用styled-components
• 配置react-to-print使用当前文档作为样式来源：

const handlePrint = useReactToPrint({
  content: () => componentRef.current,
  document: () => window.document,
});

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