1.下载

npm install --save react-to-print

2.引入

import ReactToPrint from 'react-to-print';

3.使用

方法1

 //触发按钮
<ReactToPrint
    trigger={() => <a href="#">点此打印</a>}
    content={() => this.ref}//他和下面的this.ref要一致才可以打印出指定内容
 // copyStyles = {false} 这个可以帮你打印隐藏的内容哦!
/>
//打印内容
<div ref={el => (this.ref = el)}>//可以更改this.ref的值来进行不同内容的打印
     ....内容
<div/>

方法2

 

<Button onClick={handlePrint} ghost icon={<DownloadOutlined />} >点击打印</Button>

 <ComponentToPrint ref={componentRef}/>

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

上面这两种方法大家都可以去react-to-print的md文件中找到,我写的有点不全面,嘿嘿动动发财的小手自己去看看吧

完成以上步骤大家就可以进行愉快的使用react-to-print了,下面给大家说一说我遇到的小问题,都是个人理解,有问题欢迎小伙伴指出,相互学习一下

问题1:为什么我滴样式不见了?

 解决办法有两种:

第一种:把样式写入行内,行内样式就可以很轻松的被打印出来啦

  <div style={{ margin: '25px 50px 15px' }}>

第二种:在css里面写媒体查询,实例如下

@media print {
	.header {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 65px;
		font-weight: 900;
		font-size: 20px;
	}
}

问题2:循环遍历打印的时候怎么每次只打印了最后的盒子

如果你采用的是方法一,那么你只要每次ref不一样就可以实现了

如果你采用的是方法二进行打印,建议你把要打印的内容和按钮单独写一个组件里面,就好使了