react-to-print打印

介绍

React-to-print 是一个用于在 React 应用中实现打印功能的库。它提供了一些方便的方法和组件，可以帮助你轻松地将页面内容导出为打印格式

安装

    npm install react-to-print

使用

    import ReactToPrint from 'react-to-print';

     const popupContentRef = useRef(null);

<PrinterOutlined>是标签 <ReactToPrint> 是一个按钮，用来触发打印操作。 trigger 属性用于指定触发打印操作的元素或组件。它可以是一个按钮、链接或其他可以点击的元素。当用户点击该元素时，会触发打印操作。trigger 属性接受一个函数，该函数必须返回一个 React 元素。常见的用法是将其设置为一个函数组件，返回一个按钮或链接，如示例中的 <PrinterOutlined/>。 content 属性用于指定要打印的内容。它可以是一个组件或一个函数，该函数返回要打印的内容。要确保要打印的内容是可见的，并且在渲染时可以正常访问。在示例中，我们将 popupContentRef.current 传递给了 content 属性，以便将其打印出来。

<div className={styles.printerOutlined}>
    <div>
        <ReactToPrint
            trigger={() => <PrinterOutlined />}
            content={() => popupContentRef.current}
        ></ReactToPrint>
    </div>
</div>

<div ref={popupContentRef} id="popupContentRef" className={styles.modalContent}>
    ...需要打印内容
</div>

分页效果

@media print {
  html, body {
    height: initial !important;
    overflow: initial !important; // 如果出现无法分页加入此属性
    -webkit-print-color-adjust: exact;
  }
}