首先,用到是react中的tinper中的组件表,实现的表格,发现要想实现当前页面内容占满时,自动换页,并在下一页中增加标题和表头。因为这个组件是封装的,你取不到啥时候要分页的值的地方。后来用原始的table,tr,td进行编辑,虽然获取到了要分页的地方,并为加上分页。但是加上标题,这个标题还是在table中,这样样式就不行了。最后有用其他办法,ul,li,和ul的样式display:inline-table,li的样式display:table-cell编写,具体的代码如下:
1.表格中的表头部分
<div id="print-context">
<ul style={{width:"100%",display:"inline-table",border:"none",borderCollapse:"collapse",borderBottom:"1px solid #000",marginBottom:"-1px",boxSizing:"border-box",borderTop:"1px solid"}} ref={r=>this.title=r}>
<li style={{width:"40px",display:"table-cell",textAlign:"left",padding:"0 3px",boxSizing:"border-box",borderRight:"1px solid #000",borderLeft:"1px solid #000"}}>{lang.template("YS_FED_PROJECT_L_00051276")}</li>
<li style={{width:"120px",display:"table-cell",textAlign:"left",padding:"0 3px",boxSizing:"border-box",borderRight:"1px solid #000"}}>{lang.template("YS_FED_PROJECT_L_00050446")}</li>
<li style={{width:"105px",display:"table-cell",textAlign:"left",padding:"0 3px",boxSizing:"border-box",borderRight:"1px solid #000"}}>{lang.template("YS_FED_PROJECT_L_00050718")}</li>
<li style={{width:"80px",display:"table-cell",textAlign:"left",padding:"0 3px",boxSizing:"border-box",borderRight:"1px solid #000"}}>{lang.template("YS_FED_PROJECT_L_00051101")}</li>
<li style={{width:"60px",display:"table-cell",textAlign:"left",padding:"0 3px",boxSizing:"border-box",borderRight:"1px solid #000"}}>{lang.template("YS_FED_PROJECT_L_00050974")}</li>
<li style={{width:"100px",display:"table-cell",textAlign:"left",padding:"0 3px",boxSizing:"border-box",borderRight:"1px solid #000"}}>{lang.template("YS_FED_PROJECT_L_00051212")}</li>
<li style={{width:"80px",display:"table-cell",textAlign:"left",padding:"0 3px",boxSizing:"border-box",borderRight:"1px solid #000"}}>{lang.template("YS_FED_PROJECT_L_00050816")}</li>
<li style={{width:"60px",display:"table-cell",textAlign:"left",padding:"0 3px",boxSizing:"border-box",borderRight:"1px solid #000"}}>{lang.template("YS_FED_PROJECT_L_00050358")}</li>
<li style={{display:"table-cell",textAlign:"left",padding:"0 3px",boxSizing:"border-box",borderRight:"1px solid #000"}}>{lang.template("YS_FED_PROJECT_L_00050801")}</li>
</ul>
{
_this.getContext(data)
}
</div>
2.表体部分
getContext=(data)=>{
if(data&&data.puDeliveryPrintDetails&&data.puDeliveryPrintDetails.length>0){
return data.puDeliveryPrintDetails.map((item,index)=>{
return (
<ul style={{width:"100%",display:"inline-table",border:"none",borderCollapse:"collapse",borderBottom:"1px solid #000",marginBottom:"-1px",boxSizing:"border-box"}} ref={"ref"+index}>
<li style={{width:"40px",display:"table-cell",textAlign:"left",padding:"0 3px",boxSizing:"border-box",borderRight:"1px solid #000",borderLeft:"1px solid #000"}}>
<p style={{display:"table",width:"100%", tableLayout:"fixed",wordWrap:"break-word"}}>{++index}</p>
</li>
<li style={{width:"120px",display:"table-cell",textAlign:"left",padding:"0 3px",boxSizing:"border-box",borderRight:"1px solid #000"}}>
<p style={{display:"table",width:"100%", tableLayout:"fixed",wordWrap:"break-word"}}>{item.poItemDetail}</p>
</li>
<li style={{width:"105px",display:"table-cell",textAlign:"left",padding:"0 3px",boxSizing:"border-box",borderRight:"1px solid #000"}}>
<p style={{display:"table",width:"100%", tableLayout:"fixed",wordWrap:"break-word"}}>{item.itemNo}</p>
</li>
<li style={{width:"80px",display:"table-cell",textAlign:"left",padding:"0 3px",boxSizing:"border-box",borderRight:"1px solid #000"}}>
<p style={{display:"table",width:"100%", tableLayout:"fixed",wordWrap:"break-word"}}>{item.itemName}</p>
</li>
<li style={{width:"60px",display:"table-cell",textAlign:"left",padding:"0 3px",boxSizing:"border-box",borderRight:"1px solid #000"}}>
<p style={{display:"table",width:"100%", tableLayout:"fixed",wordWrap:"break-word"}}>{item.itemBrandName}</p>
</li>
<li style={{width:"100px",display:"table-cell",textAlign:"left",padding:"0 3px",boxSizing:"border-box",borderRight:"1px solid #000"}}>
<p style={{display:"table",width:"100%", tableLayout:"fixed",wordWrap:"break-word"}}>{item.itemBrandstyle}</p>
</li>
<li style={{width:"80px",display:"table-cell",textAlign:"left",padding:"0 3px",boxSizing:"border-box",borderRight:"1px solid #000"}}>
<p style={{display:"table",width:"100%", tableLayout:"fixed",wordWrap:"break-word"}}>{item.orderReqDate?item.orderReqDate==="-"?item.orderReqDate:moment(item.orderReqDate).format('YYYY-MM-DD'):''}</p>
</li>
<li style={{width:"60px",display:"table-cell",textAlign:"left",padding:"0 3px",boxSizing:"border-box",borderRight:"1px solid #000"}}>
<p style={{display:"table",width:"100%", tableLayout:"fixed",wordWrap:"break-word"}}>{item.deliQty}</p>
</li>
<li style={{display:"table-cell",textAlign:"left",padding:"0 3px",boxSizing:"border-box",borderRight:"1px solid #000"}}>
<span>{item.envMark?`${item.envMark.name};`:""}</span>
<span>{item.isNeedCheck?lang.template("YS_FED_PROJECT_L_00050067"):""}</span>
</li>
</ul>
)
})
}else{
return null;
}
}
3.标题
<div ref={el => (this.titleRef = el)} style={{textAlign:"center",display:"inline-block",width:"100%"}}>
<Label style={{fontSize:"35px"}}>{data&&data.billType?data.billType.name:""}{lang.template("HAND_PURCHASER_0000027") /* "送货单" */}</Label>
<div>
<Label>{data&&data.billNo}</Label>
<span style={{marginRight:"10px"}}>{data&&data.asnNo?data.asnNo:""}</span>{/* 供应商DN号 */}
<span>{data&&data.purchaseType}{/* 交货模式 */}</span>
</div>
</div>
4.打印事件部分
onPrint=async(type)=>{
let id = this.props.location.search.slice(4)
let printView = null;
await actions.deliverManage.getDeliverPrintData({ id })
if(type==="print"){
printView = this.printRef //获取待打印元素
}else{
printView = this.printBoxRef //获取待打印元素
}
document.querySelector('#root').className = 'print-hide' //将不需要打印的元素隐藏
document.body.appendChild(printView) //将待打印元素追加到body中
//首页的表格上其他内容(不只有标题)的高度
let titleHeight = document.getElementById("print-title-total").offsetHeight;
//中间内容表的高度
let contentHeight = 0;
//打印页面的高度(即超过该高度就需要强制分页的高度)
let printHeight = 1000;
//表格内容每一行的所有dom集合
let refObj = this.child.refs;
let hyHtml = null;
for(let key in refObj){
//单个行的dom
let html = refObj[key];
contentHeight = contentHeight + html.offsetHeight;
//当单页打印的内容超过此高度则需要强制分页,并添加标题和表头
if(titleHeight+contentHeight>=printHeight){
//添加强制分页
hyHtml = document.createElement("div");
hyHtml.setAttribute("style","page-break-after:always");
hyHtml.className="qiangzhfy"
html.parentNode.insertBefore(hyHtml,html);
//添加每页标题
let div = document.createElement('div');
div.setAttribute("style","margin:10px");
div.className="other-title";
div.appendChild(this.child.titleRef.cloneNode(true));
html.parentNode.insertBefore(div,html);
//添加每页表头
let divTableTitle = document.createElement('div');
divTableTitle.className="other-table-title";
divTableTitle.appendChild(this.child.title.cloneNode(true))
html.parentNode.insertBefore(divTableTitle,html);
contentHeight = 0;
//标题的高度
titleHeight = this.child.titleRef.offsetHeight;
}
}
window.print() //调用浏览器的打印预览
let printContext = document.getElementById("print-context");
let listChild = printContext.childNodes;
//删除之前添加的dom,否则每一次点击打印按钮事件,之前添加的元素还在就会有问题
for (let i = listChild.length - 1; i >= 0; i--) { // 一定要倒序,正序是删不干净的,可自行尝试
//删除强制分页
if(listChild[i].className==="qiangzhfy"){
printContext.removeChild(listChild[i]);
}
//删除添加标题
if(listChild[i].className==="other-title"){
printContext.removeChild(listChild[i]);
}
//删除添加表头
if(listChild[i].className==="other-table-title"){
printContext.removeChild(listChild[i]);
}
}
document.body.removeChild(printView) //将待打印元素从body中移除
document.querySelector('#root').className = '' //将原始页面恢复
}