当前位置：首页 > React

react 实现打印

2026-01-26 12:07:59React

实现打印功能的方法

在 React 中实现打印功能可以通过多种方式完成，以下是几种常见的实现方法：

使用 window.print() 方法

调用浏览器原生的打印 API 是最简单的方式，适用于打印整个页面或当前可见内容。

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

在组件中使用按钮触发打印：

<button onClick={handlePrint}>打印页面</button>

打印特定区域

如果需要打印页面中的特定部分，可以通过 CSS 控制打印内容的显示与隐藏。

@media print {
  .no-print {
    display: none;
  }
  .print-only {
    display: block;
  }
}

在组件中标记需要打印的区域：

<div className="print-content">
  {/* 需要打印的内容 */}
</div>
<button onClick={handlePrint}>打印指定区域</button>

使用 react-to-print 库

对于更复杂的打印需求，可以使用第三方库 react-to-print，它提供了更灵活的打印控制。

安装库：

npm install react-to-print

使用示例：

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

const ComponentToPrint = React.forwardRef((props, ref) => {
  return (
    <div ref={ref}>
      {/* 需要打印的内容 */}
    </div>
  );
});

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

  return (
    <div>
      <ComponentToPrint ref={componentRef} />
      <button onClick={handlePrint}>打印</button>
    </div>
  );
};

自定义打印样式

通过 CSS 可以自定义打印输出的样式，确保打印内容符合需求。

@media print {
  body * {
    visibility: hidden;
  }
  .print-area, .print-area * {
    visibility: visible;
  }
  .print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}

处理打印事件

可以监听打印事件，在打印前后执行特定操作。

const handleBeforePrint = () => {
  console.log('准备打印');
};

const handleAfterPrint = () => {
  console.log('打印完成');
};

window.addEventListener('beforeprint', handleBeforePrint);
window.addEventListener('afterprint', handleAfterPrint);

以上方法可以根据具体需求选择使用，react-to-print 库提供了最完整的解决方案，适合大多数 React 应用中的打印需求。

react 实现打印