React JS中React to Print打印预览显示空白页问题求助

问题出在哪 #

你这段代码有两个关键错误：

1. Ref 用法不对：你用useRef()声明了 ref，但之后直接把 DOM 元素赋值给componentRef变量，正确的做法应该是把元素赋值给componentRef.current——useRef 返回的是个带current属性的对象，所有对 ref 的操作都要通过这个属性。
2. Content 返回值错误：content回调需要返回要打印的 DOM 元素，也就是componentRef.current，而不是直接返回 ref 对象本身。

修正后的代码 #

import React, { useRef } from 'react';
import ReactToPrint from 'react-to-print';
import Button from '你的Button组件路径';
import Table from '你的Table组件路径';

const YourComponent = () => {
  // 初始化 ref 为 null
  const componentRef = useRef(null);

  return (
    <>
      <ReactToPrint
        trigger={() => <Button>Print this out!</Button>}
        // 返回 ref 指向的 DOM 元素
        content={() => componentRef.current}
      />
      {/* 直接把 ref 绑定到目标元素，不用手动赋值 */}
      <div id="showTable" ref={componentRef}>
        <div>
          <p>hello World</p>
          <Table dataSource={tabledata} columns={columnsLetter} />
        </div>
      </div>
    </>
  );
};

export default YourComponent;

如果改完还是空白，检查这几点 #

• 样式没加载：如果 Table 用了 CSS-in-JS 或者局部样式，打印时可能没法正常读取。试试把打印需要的样式写到全局 CSS 里，或者用@media print媒体查询专门定义打印样式，确保打印预览里元素不会因为样式问题被隐藏。
• 数据异步加载：如果dataSource是异步获取的，要确保打印时数据已经加载完成。可以给 ReactToPrint 加onBeforeGetContent回调，等数据加载好再触发打印。

内容的提问来源于stack exchange，提问作者Hassan Muhammad Sabir