当前位置：首页 > React

react实现打印功能

2026-01-26 17:34:43React

使用React实现打印功能

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

使用window.print()方法

直接调用浏览器的打印API是最简单的方式。创建一个按钮触发打印当前页面。

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

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

打印特定区域内容

使用CSS的@media print规则隐藏不需要打印的元素，只显示特定区域。

react实现打印功能

const PrintableComponent = () => {
  return (
    <div>
      <div className="no-print">这部分不会打印</div>
      <div className="print-only">这部分会打印</div>
    </div>
  );
};

// CSS样式
@media print {
  .no-print {
    display: none;
  }
  .print-only {
    display: block;
  }
}

使用react-to-print库

安装react-to-print库可以更方便地控制打印内容：

npm install react-to-print

使用示例：

react实现打印功能

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

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

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

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

打印前处理数据

在打印前可以对数据进行格式化或处理：

const handlePrint = () => {
  // 数据处理逻辑
  const formattedData = formatDataForPrint(data);

  // 打开新窗口打印
  const printWindow = window.open('', '_blank');
  printWindow.document.write(`
    <html>
      <head>
        <title>打印文档</title>
      </head>
      <body>
        ${formattedData}
      </body>
    </html>
  `);
  printWindow.document.close();
  printWindow.print();
};

打印样式优化

通过CSS优化打印输出效果：

@media print {
  body {
    margin: 0;
    padding: 0;
    font-size: 12pt;
  }

  @page {
    size: A4;
    margin: 10mm;
  }

  h1 {
    page-break-before: always;
  }

  img {
    max-width: 100%;
  }
}

这些方法可以根据具体需求选择使用，react-to-print库提供了最完整的解决方案，适合复杂的打印需求。