当前位置：首页 > React

react框架如何打印

2026-02-26 16:06:32React

打印页面内容

使用React打印页面内容可以通过浏览器内置的window.print()方法实现。创建一个打印按钮组件，点击时触发打印功能。

const PrintButton = () => {
  const handlePrint = () => {
    window.print();
  };

  return <button onClick={handlePrint}>Print Page</button>;
};

打印特定区域

若只需打印页面中的特定区域，可通过CSS控制打印范围。使用@media print媒体查询隐藏非目标元素，或创建一个专门用于打印的组件。

react框架如何打印

const PrintableComponent = ({ children }) => {
  return (
    <div className="printable-area">
      {children}
      <style>{`
        @media print {
          body * {
            visibility: hidden;
          }
          .printable-area, .printable-area * {
            visibility: visible;
          }
          .printable-area {
            position: absolute;
            left: 0;
            top: 0;
          }
        }
      `}</style>
    </div>
  );
};

使用第三方库

对于更复杂的打印需求（如PDF生成或样式定制），可引入第三方库如react-to-print。该库允许将React组件转换为可打印的格式。

react框架如何打印

import ReactToPrint from 'react-to-print';

class ComponentToPrint extends React.Component {
  render() {
    return <div>Content to be printed</div>;
  }
}

class PrintWrapper extends React.Component {
  render() {
    return (
      <div>
        <ReactToPrint
          trigger={() => <button>Print</button>}
          content={() => this.componentRef}
        />
        <ComponentToPrint ref={(el) => (this.componentRef = el)} />
      </div>
    );
  }
}

打印样式优化

通过CSS调整打印样式，确保输出效果符合预期。例如移除背景色、调整边距或隐藏导航栏。

@media print {
  nav, footer {
    display: none;
  }
  body {
    background-color: white;
    margin: 0;
    padding: 10mm;
  }
  a::after {
    content: " (" attr(href) ") ";
  }
}

打印事件监听

监听beforeprint和afterprint事件，在打印前后执行特定操作（如数据加载或UI调整）。

useEffect(() => {
  const beforePrint = () => console.log('Printing started');
  const afterPrint = () => console.log('Printing completed');

  window.addEventListener('beforeprint', beforePrint);
  window.addEventListener('afterprint', afterPrint);

  return () => {
    window.removeEventListener('beforeprint', beforePrint);
    window.removeEventListener('afterprint', afterPrint);
  };
}, []);