react控制打印机打印_React实现打印功能
⼀、需求分析：
环境：react，antd，antd-pro
将选中的数据进⾏打印，可以⾃定义分页的⼤⼩。
由于打印的列等多个因素，导致如果写成组件在使⽤的时候依旧会改变源码，所以采⽤了写成页⾯的⽅式，
⼆、实现需求：
1、数据传值
进⾏传值的时候，刚开始使⽤的是在通过this.props.location进⾏传值，但是这样数据被写死了，导致再次进⼊页⾯的时候⽆法更新打印的值。
最后采⽤了⼀个全局的model进⾏实现的传值。
2、表格⽣成
分为四部分进⾏⽣成，分别是标题、表头、表格、表尾。其中表头，表尾因为需求的原因写死。
以下为代码：
createTitle = (title)=>(
{title}
)
createHeader = (headerData)=>{
headerData = [
{
orderID:'订单编号',
value:'P201901020002',
},{
people:'采购⼈员',
value:'xxx',fontweight属性bold
},{
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}页`}{`共${al}页`} )
}
createPrintArea = (printCol)=>{
const {printGroupData} = this.state;
return (
printGroupData.map((item,index)=>{
if(item.length){
return (
{ateTitle('xxxxxxx公司xxx单')}
{ateHeader('asd')}
{ateForm(printCol,item)}
{ateFooter({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:{
fontWeight:'bold',
fontSize: '12px',
},
printTable:{
fontSize: '12px',
fontWeight: '700',
color: 'black',
border: '1px black',
borderCollapse: 'collapse',
textAlign: 'center',
},
printTableTh:{
padding: '4px',
border: '1px solid black',
textAlign: 'center',
},
printTableTr:{ textAlign:'center', padding: '4px',
border: '1px solid black', },
number:{
width: '60px',
},
goodsName:{
width: '180px',
},
unitName:{
width: '75px',
},
specifications:{
width: '90px',
},
goodsType:{
width: '90px',
},
footer:{
fontSize:'12px',
},
footerSpace:{
width: '20px',
display: 'block',
},
printInputFooter:{ fontWeight:'bold', border:'none',
width: '85px',
},
};
3、实现分页
分页即将数据进⾏分割，然后每次⽣成表格的时候将分割后的每个表格数据依次传⼊表格⽣成函数，从⽽⽣成全部表格。
分页函数：
//传⼊的数据为：分页的⼤⼩，需要分页的数据。
page = (pageNumber,printData)=>{
const printDataBack = at();
const printGroupData = [];
while(printDataBack.length >= pageNumber){
let tempGroup = [];
tempGroup = printDataBack.splice(0,pageNumber);
printGroupData.push(tempGroup);
}
if(printDataBack.length){
printGroupData.push(printDataBack);
}
printGroupData.forEach((item)=>{
item.forEach((i,index)=>{
i.number = index+1;
})
});
return printGroupData;
}
注意：解构出来的数据是引⽤，需要进⾏备份。
设置⼀个input框以及⼀个按钮，input框⽤于输⼊分页的数字，再点击按钮以及第⼀次进⼊页⾯的时候进⾏分页。
4、实现打印
实现⽅法⼀(不推荐)：
直接在本页⾯进⾏刷新
优点：css不⽤内嵌。
缺点：导致本页⾯刷新，某些数据丢失。
实现⽅法：直接获取到需要打印的区域，然后将本页⾯的innerHTML设置为获取的区域，然后调⽤系统的print，最后调⽤reload 代码：
print = () => {
window.document.body.innerHTML = ElementById('billDetails').innerHTML;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。