网页打印,强制分页并为每一页添加标题,为每一页添加表头

首先,用到是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 = '' //将原始页面恢复
    }
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值