react框架如何打印

打印当前组件内容

在React中打印当前组件内容可以通过window.print()方法触发浏览器打印功能。结合CSS的@media print规则可以优化打印样式。

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

  return (
    <div>
      <button onClick={handlePrint}>打印当前页</button>
      <div className="print-content">
        {/* 需要打印的内容 */}
      </div>
    </div>
  );
};

打印特定DOM元素

使用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) => (
  <div ref={ref}>{/* 需要打印的内容 */}</div>
));

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

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

打印样式优化

通过CSS媒体查询定制打印样式，隐藏非必要元素并调整布局。

@media print {
  .no-print {
    display: none;
  }
  .print-content {
    width: 100%;
    margin: 0;
    padding: 0;
  }
}

打印前数据预处理

在触发打印前可对数据进行格式化处理，确保打印内容符合要求。

const prepareDataForPrint = (data) => {
  return data.map(item => ({
    ...item,
    formattedDate: new Date(item.date).toLocaleDateString()
  }));
};

const handlePrint = (rawData) => {
  const printData = prepareDataForPrint(rawData);
  // 使用处理后的数据进行打印
};

打印多页内容分页控制

使用CSS的page-break属性控制分页，避免内容被截断。

.print-page {
  page-break-after: always;
}
.print-section {
  page-break-inside: avoid;
}