首先，用到是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){//单个行的domlet 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 = '' //将原始页面恢复}
