如何使用react-to-print实现不渲染UI却能正常打印？

方案1：通过CSS将内容移出可视区域（不影响打印） #

不要用hidden类（通常对应display:none，打印时会被浏览器忽略），而是通过定位把打印内容移出屏幕可视范围，页面上看不到，但打印时能正常渲染。

示例代码：

import React, { useRef } from 'react';
import ReactToPrint from 'react-to-print';

// 定义要打印的内容组件
const PrintContent = () => (
  <div>
    <h1>待打印标题</h1>
    <p>这部分内容不会出现在页面UI，但能正常打印</p>
  </div>
);

const App = () => {
  const printRef = useRef();

  return (
    <div>
      <ReactToPrint
        trigger={() => <button>点击打印</button>}
        content={() => printRef.current}
      />
      {/* 承载打印内容的容器，通过CSS隐藏 */}
      <div ref={printRef} className="print-hidden-container">
        <PrintContent />
      </div>
    </div>
  );
};

对应的CSS：

.print-hidden-container {
  position: absolute;
  left: -9999px;
  top: -9999px;
  visibility: hidden; /* 避免占用页面布局空间 */
}

/* 打印时恢复正常布局 */
@media print {
  .print-hidden-container {
    position: static;
    left: auto;
    top: auto;
    visibility: visible;
  }
}

方案2：使用content属性动态生成打印内容（无需提前渲染） #

react-to-print支持通过content回调直接返回要打印的组件，无需在页面DOM中预先渲染，是更简洁的实现方式。

函数组件示例：

import React from 'react';
import ReactToPrint from 'react-to-print';
import ReactDOM from 'react-dom';

const PrintContent = () => (
  <div>
    <h1>动态生成的打印内容</h1>
    <p>完全不会出现在页面UI中</p>
  </div>
);

const App = () => {
  return (
    <div>
      <ReactToPrint
        trigger={() => <button>点击打印</button>}
        content={() => {
          // 创建临时DOM节点挂载打印组件
          const tempDiv = document.createElement('div');
          ReactDOM.render(<PrintContent />, tempDiv);
          return tempDiv;
        }}
      />
    </div>
  );
};

类组件示例：

import React, { Component } from 'react';
import ReactToPrint from 'react-to-print';
import ReactDOM from 'react-dom';

class PrintContent extends Component {
  render() {
    return (
      <div>
        <h1>类组件打印内容</h1>
      </div>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div>
        <ReactToPrint
          trigger={() => <button>点击打印</button>}
          content={() => {
            const tempDiv = document.createElement('div');
            ReactDOM.render(<PrintContent />, tempDiv);
            return tempDiv;
          }}
        />
      </div>
    );
  }
}

关键说明 #

hidden类对应的display:none会让浏览器完全忽略该元素，打印时无法抓取内容；而上面两种方法要么让元素存在于DOM但不可见，要么临时生成打印内容，确保打印引擎能正常获取到需要打印的节点。

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