react与antd结合使用实现分页打印功能以及插件;

wasbsbsb

于 2019-10-22 09:53:25 发布

阅读量2.8k

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_45343326/article/details/102676756

版权

本文介绍了如何在React应用中结合Ant Design库，使用'react-to-print'插件来实现分页打印功能。通过在antd的Modal组件中展示表格，并利用CSS样式{'pageBreakAfter': 'always'}实现内容分页，从而达到一次打印多张表格的目标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载 npm install --save react-to-print;
引用 import ReactToPrint from ‘react-to-print’;
//触发按钮

					 <ReactToPrint
 				   			  trigger={() => <a href="#">点此打印</a>}
 				   			  content={() => this.componentRef}
 					   />

//打印内容

					 <div ref={el => (this.componentRef = el)}>
        				    ....内容
					  <div/>

将表格放入antd中的modal实现一次打印多张表格;

					<Modal
   				     title="打印付款通知书"
      				 visible={printShow}
        				  onOk={this.handleOk}
     				 	  onCancel={handleCancel}
      					  footer={
     				     <div>
           					<ReactToPrint
             				trigger={() => <span>打印</span>}
           				    content={() => this.componentRef}
				            />
        				  </div>
        			//将打印功能的一个按钮放入到FOOTER里
      					  }
       				 width={1200}
      				>

将ref 需要打印的内容放入外层DIV包着,然后使用stle={{pageBreakAfter:‘always’}} 实现样式分页打印

     <div ref={el => (this.componentRef = el)} >
          {listData.length > 0 ? listData.map((e, index) => (
            <div className="cardHtml" style={{ pageBreakAfter: 'always' }} key={index}>
              <Card title="付款通知书" bordered={false}  >
                <Form>