当前位置：首页 > React

react如何实现批量打印

2026-01-24 15:18:50React

实现批量打印的思路

在React中实现批量打印通常需要结合浏览器的打印功能和状态管理。核心步骤包括收集待打印数据、生成打印内容、调用浏览器打印API。

使用React-to-print库

安装react-to-print库可以简化打印逻辑：

npm install react-to-print

创建可打印组件：

react如何实现批量打印

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

const PrintableComponent = React.forwardRef(({ data }, ref) => (
  <div ref={ref}>
    {data.map((item) => (
      <div key={item.id} className="print-item">
        <h3>{item.title}</h3>
        <p>{item.content}</p>
      </div>
    ))}
  </div>
));

function BatchPrint() {
  const printRef = useRef();
  const printData = [
    { id: 1, title: '文档1', content: '内容1' },
    { id: 2, title: '文档2', content: '内容2' }
  ];

  const handlePrint = useReactToPrint({
    content: () => printRef.current,
  });

  return (
    <div>
      <PrintableComponent ref={printRef} data={printData} />
      <button onClick={handlePrint}>批量打印</button>
    </div>
  );
}

自定义打印样式

通过CSS控制打印时的显示效果：

@media print {
  body * {
    visibility: hidden;
  }
  .print-item, .print-item * {
    visibility: visible;
  }
  .print-item {
    page-break-after: always;
  }
}

动态数据加载

对于大量数据需要分页打印的情况：

react如何实现批量打印

const printInBatches = async (data, batchSize = 5) => {
  for (let i = 0; i < data.length; i += batchSize) {
    const batch = data.slice(i, i + batchSize);
    await new Promise((resolve) => {
      setCurrentBatch(batch);
      setTimeout(() => {
        handlePrint();
        resolve();
      }, 1000);
    });
  }
};

打印多个独立组件

需要打印多个独立组件时，可以合并内容：

const MultiPrint = ({ components }) => {
  const printRef = useRef();

  const handlePrint = useReactToPrint({
    content: () => printRef.current,
  });

  return (
    <div>
      <div ref={printRef}>
        {components.map((Component, index) => (
          <Component key={index} />
        ))}
      </div>
      <button onClick={handlePrint}>打印全部</button>
    </div>
  );
};