react控制打印机打印_React实现打印功能

一、需求分析：

环境：react，antd，antd-pro

将选中的数据进行打印，可以自定义分页的大小。

由于打印的列等多个因素，导致如果写成组件在使用的时候依旧会改变源码，所以采用了写成页面的方式，

二、实现需求：

1、数据传值

进行传值的时候，刚开始使用的是在通过this.props.location进行传值，但是这样数据被写死了，导致再次进入页面的时候无法更新打印的值。

最后采用了一个全局的model进行实现的传值。

2、表格生成

分为四部分进行生成，分别是标题、表头、表格、表尾。其中表头，表尾因为需求的原因写死。

以下为代码：

createTitle = (title)=>(

{title}

)

createHeader = (headerData)=>{

headerData = [

{

orderID:'订单编号',

value:'P201901020002',

},{

people:'采购人员',

value:'xxx',

},{

time:'采购时间',

value:'2019年01月01日',

}

];

return (

订单编号：
采购员：								采购时间：

)

}

createForm = (printCol,printData)=>(

{

(

{printCol.map(item=>

{item.name}

)}

)

}

{

printData.map(item=> (

{Object.keys(item).map(i =>

{item[i]})}

)

)

}

)

createFooter = (footerData)=>{

return (

供应商(签字)						库管员(签字)						{`第${footerData.current}页`}	{`共${footerData.total}页`}

)

}

createPrintArea = (printCol)=>{

const {printGroupData} = this.state;

return (

printGroupData.map((item,index)=>{

if(item.length){

return (

{this.createTitle('xxxxxxx公司xxx单')}

{this.createHeader('asd')}

{this.createForm(printCol,item)}

{this.createFooter({current:index+1,total:printGroupData.length})}

)

}

})

)

}

最主要的是CSS的调整，因为之后的打印需求将所有的CSS内联：

以下为css：

export const styleObj = {

printArea:{

width: '500px',

fontSize: '12px',

align:'center'

},

printInput:{

fontWeight:'bold',

border: 'none',

},

title:{

textAlign: 'center',

fontSize: '15px',

fontWeight: '700',

},

header:{

fontW