如何使用react-to-print正确打印嵌套React组件？

核心问题梳理 #

你当前遇到三个关键问题：

• 打印页打开后内容为空却显示两页
• 外部CSS仅颜色属性生效，边距、内边距等样式必须用内联写法
• 无法正确打印子组件的专属结构和传入的姓名、姓氏等数据

分步修复方案 #

1. 修正主组件逻辑（解决内容为空+多页问题） #

原代码里的handlePrint函数完全多余，还会干扰ReactToPrint的正常触发；同时用display: none隐藏打印组件会导致浏览器不渲染元素，ReactToPrint拿不到内容。修改后的主组件代码：

import { Fragment, useRef } from "react";
import FormDataPrint from "../Printer/FormDataPrint";
import ReactToPrint from "react-to-print";
import { Card, Button } from "reactstrap";
import { Printer } from "react-feather";

const FormData = ({ data }) => {
  const formDataPrintRef = useRef();

  return (
    <Fragment>
      <Card>
        <div className="d-flex justify-content-end mt-1">
          <ReactToPrint
            trigger={() => (
              <Button
                className="ms-1 text-center"
                outline
                color="primary"
              >
                <Printer style={{ marginRight: "5px" }} size={20} />
                <span>Print</span>
              </Button>
            )}
            content={() => formDataPrintRef.current}
            // 自定义打印页边距，避免空白页
            pageStyle={`
              @page { margin: 1cm; }
              body { margin: 0; padding: 0; }
            `}
          />
          {/* 用visibility隐藏而非display:none，确保元素被浏览器渲染 */}
          <div style={{ visibility: "hidden", position: "absolute", left: "-9999px" }}>
            <FormDataPrint ref={formDataPrintRef} data={data} />
          </div>
        </div>
      </Card>
    </Fragment>
  );
};

export default FormData;

2. 完善子组件（展示传入数据+绑定正确ref） #

原子组件仅显示固定文本，现在改为渲染传入的姓名、姓氏等数据，同时确保ref绑定到打印容器上：

import React, { forwardRef } from "react";
// 引入全局样式文件
import "./FormDataPrint.css";

const FormDataPrint = forwardRef((props, ref) => {
  const { data } = props;

  return (
    <div ref={ref} className="print-container">
      <h2>表单打印内容</h2>
      <div className="print-item">
        <span className="print-label">姓名：</span>
        <span className="print-value">{data.firstName}</span>
      </div>
      <div className="print-item">
        <span className="print-label">姓氏：</span>
        <span className="print-value">{data.lastName}</span>
      </div>
      {/* 其他需要打印的字段 */}
    </div>
  );
});

export default FormDataPrint;

3. 修复样式失效问题 #

外部CSS仅颜色生效是因为浏览器打印时使用print媒体类型，且scoped样式（如CSS Modules）无法在ReactToPrint的iframe中生效。创建全局样式文件FormDataPrint.css：

/* 通用样式（屏幕和打印都生效） */
.print-container {
  width: 210mm; /* 匹配A4纸宽度 */
  padding: 20px;
  background-color: #ffffff;
}

.print-item {
  margin-bottom: 16px;
  font-size: 16px;
}

.print-label {
  font-weight: 600;
  color: #2d3748;
  min-width: 80px;
  display: inline-block;
}

.print-value {
  color: #4a5568;
}

/* 专门针对打印的样式 */
@media print {
  body {
    margin: 0;
    padding: 0;
  }
  .print-container {
    width: 100%;
    padding: 0;
    box-shadow: none;
  }
  /* 隐藏任何不需要打印的元素 */
  .no-print {
    display: none !important;
  }
}

关键修复点说明 #

• 移除多余的handlePrint：ReactToPrint的trigger按钮自带打印触发逻辑，额外绑定onClick会导致冲突。
• 替换隐藏方式：visibility: hidden让元素保持渲染状态（只是不可见），ReactToPrint能正常获取DOM内容；position: absolute把元素移出视口，不影响页面布局。
• 全局样式+媒体查询：用全局样式确保ReactToPrint的iframe能识别类名，@media print专门定义打印时的样式，覆盖浏览器默认打印样式。
• 自定义打印页边距：通过pageStyle设置@page规则，避免内容超出页面产生空白页。

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