前台页面打印

前台页面就是一个button，就不写了，

对应的打印页面div为

<div id="Print_div" class="printdiv" style="display:none;">
	<!-- ==================================== 基本信息======================================================== -->
	<div style="width:100%">
		<div style="text-align:left;vertical-align:central">
        <label  class="bt_ti">一、基本信息</label>
    </div>
		<table  class="tAddMsg" border="1" id="table_id" style="width:100%;table-layout:fixed;">
				<tr style="width:100%;">
					<td style="width:80px;" class="tTitle">企业内部编号：</td>
					<td  style="width:90px;" class="t_title">
						<label  id="print_lab_etpsPreentNo"> </label>
					</td>
					<td style="width:80px;" class="tTitle">经营企业编号：</td>
					<td style="width:90px;" class="t_title">
						<label  id="print_lab_bizopEtpsno"> </label>
					</td>
					<td style="width:80px;" class="tTitle">经营企业名称：</td>
					<td style="width:90px;" class="t_title">
						<label  id="print_lab_bizopEtpsNm"> </label>
					</td>
					<td style="width:80px;" class="tTitle">经营企业信用代码：</td>
					<td style="width:90px;" class="t_title">
						<label  id="print_lab_bizopEtpsSccd"> </label>
					</td>
				</tr>
				<tr>
					<td class="tTitle">仓库编号:</td>
					<td class="t_title"><label  id="print_lab_houseNo"> </label></td>
					<td class="tTitle">仓库名称:</td>
					<td class="t_title"><label  id="print_lab_houseNm"> </label></td>
					<td class="tTitle">联系人:</td>
					<td class="t_title"><label  id="print_lab_contactEr"> </label></td>
					<td class="tTitle">联系电话:</td>
					<td class="t_title"><label  id="print_lab_contactTele"> </label></td>
				</tr>
				<tr>
					
					<td class="tTitle">主管海关:</td>
					<td class="t_title"><label  id="print_lab_masterCuscd"> </label></td>
					<td class="tTitle">仓库面积:</td>
					<td class="t_title"><label  id="print_lab_houseArea"> </label></td>
					<td class="tTitle">仓库容积:</td>
					<td class="t_title"><label  id="print_lab_houseVolume"> </label></td>
					<td class="tTitle">仓库地址:</td>
					<td class="t_title"><label  id="print_lab_houseAddress"> </label></td>
				</tr>
				<tr>
					<td class="tTitle">申报时间:</td>
					<td class="t_title"><label  id="print_lab_dclTime"> </label></td>
					<td class="tTitle">录入日期:</td>
					<td class="t_title"><label  id="print_lab_inputDate"> </label></td>
					<td class="tTitle">结束有效日期:</td>
					<td class="t_title"><label  id="print_lab_finishValidDate"> </label></td>
					<td class="tTitle">企业类型:</td>
					<td class="t_title"><label  id="print_lab_houseTypecd"> </label></td>
				</tr>
				<tr>
					
					<td class="tTitle">区域场所类别:</td>
					<td class="t_title"><label  id="print_lab_bwlTypecd"> </label></td>
					<td class="tTitle">备案批准时间:</td>
					<td class="t_title"><label  id="print_lab_putrecApprTime"> </label></td>
					<td class="tTitle">变更批准时间:</td>
					<td class="t_title"><label  id="print_lab_chgApprTime"> </label></td>
					<td class="tTitle">记账模式:</td>
					<td class="t_title"><label  id="print_lab_appendTypecd"> </label></td>
				</tr>
				<tr>
					<td class="tTitle">仓库账册号:</td>
					<td class="t_title"><label  id="print_lab_bwlNo"> </label></td>
					<td class="tTitle">申报类型:</td>
					<td class="t_title"><label  id="print_lab_dclTypecd"> </label></td>
					<td class="tTitle">暂停变更标记:</td>
					<td class="t_title"><label  id="print_lab_pauseChgMarkcd"> </label></td>
					<td class="tTitle">申报企业编号:</td>
					<td class="t_title"><label  id="print_lab_dclEtpsno"> </label></td>
				</tr>
				<tr>
					<td class="tTitle">申报企业名称:</td>
					<td class="t_title"><label  id="print_lab_dclEtpsNm"> </label></td>
					<td class="tTitle">申报企业社会信用代码:</td>
					<td class="t_title"><label  id="print_lab_dclEtpsSccd"> </label></td>
					<td class="tTitle">录入单位代码:</td>
					<td class="t_title"><label  id="print_lab_inputCode"> </label></td>
					<td class="tTitle">录入单位社会信用代码:</td>
					<td class="t_title"><label  id="print_lab_inputSccd"> </label></td>
				</tr>
				<tr>
					<td class="tTitle">录入单位名称:</td>
					<td class="t_title"><label  id="print_lab_inputName"> </label></td>
					<td class="tTitle">审核状态:</td>
					<td class="t_title"><label  id="print_lab_emapvStucd"> </label></td>
					<td class="tTitle">申报标志:</td>
					<td class="t_title"><label  id="print_lab_dclMarkcd"> </label></td>
					<td class="tTitle">申请单位类型:</td>
					<td class="t_title"><label  id="print_lab_dclEtpsTypecd"> </label></td>
				</tr>
				<tr>
					<td class="tTitle">审核状态:</td>
					<td class="t_title"><label  id="print_lab_emapvStucd"> </label></td>
					<td class="tTitle">备注:</td>
					<td class="t_title" colspan="5"><label  id="print_lab_rmk"> </label></td>
				</tr>
			</table>
	</div>
	<div style="width:100%" >
		<div style="text-align:left;vertical-align:central" >
			<label  class="bt_ti">二、表体信息<font id="pa_font_two"></font></label>
		</div>
		<!--<div id="div_print_two" style="width:100%">

		</div>-->
		<table class="tAddMsg" border="1" id="bwsinfo_bwsDtTable_print" style="width:100%;table-layout:fixed;">
			<tr style="width:100%;">
				<td name="gdsSeqno" class="tTitle">商品序号 </td>
				<td name="gdsMtno" class="tTitle">商品料号 </td>
				<td name="gdecd" class="tTitle">商品编码 </td>
				<td name="gdsNm" class="tTitle">商品名称 </td>
				<td name="gdsSpcfModelDesc" class="tTitle">商品规格型号 </td>
				<td name="natcd" class="tTitle">国别代码 </td>
				<td name="dclUnitcd" class="tTitle">申报计量单位代码 </td>
				<td name="lawfUnitcd" class="tTitle">法定计量单位代码 </td>
				<td name="secdLawfUnitcd" class="tTitle">第二法定计量单位代码 </td>
				<td name="dclUprcAmt" class="tTitle">申报单价金额</td>
			</tr>
		</table>
		<br>
		<table class="tAddMsg" border="1" id="bwsinfo_bwsDtTable_print2" style="width:100%;table-layout:fixed;">
			<tr style="width:100%;">
				<td name="dclCurrcd" class="tTitle">申报币制代码</td>
				<td name="limitDateString" class="tTitle">存储(监管）期限</td>
				<td name="invtNo" class="tTitle">记账清单编号</td>
				<td name="invtGNo" class="tTitle">记账清单商品序号</td>
				<td name="cusmExeMarkcd" class="tTitle">海关执行标记</td>
				<td name="modfMarkcd" class="tTitle">修改标记</td>
			</tr>
		</table>
		<br>
				
	</div>
	<div style="width:100%" >
		<div style="text-align:left;vertical-align:central" >
			<label class="bt_ti">三、单证明细<font id="pa_font_thr"></font></label>
		</div>
		<!--<div id="div_print_thr" style="width:100%">

		</div>-->
		
		<table class="tAddMsg" border="1" id="bwsinfo_bwsPutrecTable_print" style="width:100%">
			<tr style="width:100%;">
				<td name="bopNo" class="t_title">账册编号 </td>
				<td name="acmpFormSeqno" class="t_title">表体序号 </td>
				<td name="chgTmsCnt" class="t_title">变更次数</td>
				<td name="acmpFormNo" class="t_title">随附单证编号</td>
				<td name="acmpFormTypecd" class="t_title">随附单证类型</td>
				<td name="acmpFormFileNm" class="t_title">随附单证文件名</td>
		</table>
		
	</div>
</div>

 

对应js为

//传入打印的html页面，是一个div的id
function  printPage(divId){
	if(!$("#id_print").val()){
		jp.info("请先保存再打印！");
		return;
	}
	$.ajax({
		url :  "/C_EE/Controller/getAllHlD?Hid="+$("#id_print").val(),
		type : "post",// 使用post方法访问后台
		contentType:"application/json",
//		data :searchParam,
		async:false,
		dataType : "json",// 返回数据的格式
		success : function(data) {
			if(!data.success){
				jp.info("获取打印数据出错");
				return ;
			}
            //data是json格式数据
			var bscRow = data.body.bsc;
			var Allrow = data.body;
			if(bscRow){
//				$("#table_id").html('');
//				var nameList = {'etpsPreentNo':'企业内部编号','bizopEtpsno':'经营企业编号','bizopEtpsNm':'经营企业名称','bizopEtpsSccd':'经营企业信用代码','houseNo':'仓库编号'
//					,'houseNm':'仓库名称','contactEr':'联系人','contactTele':'联系电话','masterCuscd':'主管海关','houseArea':'仓库面积','houseVolume':'仓库容积'
//						,'houseAddress':'仓库地址','dclTimeString':'申报时间','inputDateString':'录入日期','finishValidDateString':'结束有效日期'
//							,'houseTypecd':'企业类型','bwlTypecd':'区域场所类别','putrecApprTimeString':'备案批准时间','chgApprTimeString':'变更批准时间',
//							'appendTypecd':'记账模式','bwlNo':'仓库账册号','dclTypecd':'申报类型','pauseChgMarkcd':'暂停变更标记'
//								,'dclEtpsno':'申报企业编号','dclEtpsNm':'申报企业名称','dclEtpsSccd':'申报企业社会信用代码','inputCode':'录入单位代码','inputSccd':'录入单位社会信用代码'
//									,'inputName':'录入单位名称','emapvStucd':'审核状态','dclMarkcd':'申报标志','inputName':'录入单位名称','emapvStucd':'审核状态'};
//				$("#table_id").append(getHeadHtml(bscRow,nameList));
				$("#table_id").append(getHeadHtml(bscRow));
			}
			
			if(Allrow && Allrow.dt && Allrow.dt.length>0){
//				$("#div_print_two").html('');
//				var nameList = {'bwlNo':'仓库账册号','chgTmsCnt':'变更次数','gdsSeqno':'商品序号','gdsMtno':'商品料号','gdecd':'商品编码','gdsNm':'商品名称'
//					,'gdsSpcfModelDesc':'商品规格型号','natcd':'国别代码','dclUnitcd':'申报计量单位代码','lawfUnitcd':'法定计量单位代码','secdLawfUnitcd':'第二法定计量单位代码',
//					'dclUprcAmt':'申报单价金额','dclCurrcd':'申报币制代码','avgPrice':'平均美元单价','totalAmt':'库存美元总价','inQty':'入仓数量','inLawfQty':'入仓法定数量',
//					'inSecdLawfQty':'第二入仓法定数量','actlIncQty':'实增数量','actlRedcQty':'实减数量','prevdIncQty':'预增数量','prevdRedcQty':'预减数量'
//						,'inDateString':'最近入仓时间','outDateString':'最近出仓日期','limitDateString':'存储(监管）期限','inType':'设备入区方式','invtNo':'记账清单编号',
//						'invtGNo':'记账清单商品序号','cusmExeMarkcd':'海关执行标记','modfMarkcd':'修改标记'};
//				$("#div_print_two").append("<ol>"+getHtml(Allrow.dt,nameList,"")+"</ol>");

				
				var nameList = ['gdsSeqno','gdsMtno','gdecd','gdsNm','gdsSpcfModelDesc',
					'natcd','dclUnitcd','lawfUnitcd','secdLawfUnitcd','dclUprcAmt'];
				var nameList2 = ['dclCurrcd','limitDateString','invtNo','invtGNo','cusmExeMarkcd','modfMarkcd'];
				getHtmlBT("bwsinfo_bwsDtTable_print",Allrow.dt,nameList);
				getHtmlBT("bwsinfo_bwsDtTable_print2",Allrow.dt,nameList2);
			}else{
				$("#bwsinfo_bwsDtTable_print").hide();
				$("#bwsinfo_bwsDtTable_print2").hide();
				$("#pa_font_two").html('：无');
			}
			
			if(Allrow && Allrow.pad && Allrow.pad.length>0){
//				$("#div_print_thr").html('');
//				var nameList = {'bopNo':'账册编号','acmpFormSeqno':'表体序号','chgTmsCnt':'变更次数','acmpFormNo':'随附单证编号','acmpFormTypecd':'随附单证类型'
//					,'acmpFormFileNm':'随附单证文件名'};
//				$("#div_print_thr").append("<ol>"+getHtml(Allrow.pad,nameList,"")+"</ol>");
				
				var nameList = ['bopNo','acmpFormSeqno','chgTmsCnt','acmpFormNo','acmpFormTypecd','acmpFormFileNm'];
				getHtmlBT("bwsinfo_bwsPutrecTable_print",Allrow.pad,nameList);
			}else{
				$("#bwsinfo_bwsPutrecTable_print").hide();
				$("#pa_font_thr").html('：无');
			}
			var newstr = document.getElementById(divId).innerHTML;
			var oldstr = document.body.innerHTML;
			document.body.style.height="auto";
			document.body.innerHTML = newstr;
			window.print();
			document.body.innerHTML = oldstr;
		},
		error:function(data){
			jp.info("获取数据出错");
		}
	});
}

打印的公共方法，解析，其中的funGetKeyAndV方法为每个页面独有，根据字段，数据，判断显示的值

 

<style type="text/css">

@media print{
  .printdiv{
	 height:auto;
		background-color:white;
		border:1px;
		padding-left:2px;
		padding-right:2px;
		padding-top:10px;
		padding-bottom:10px;
		page-break-before:auto;
		page-break-after:always;
	} 
	.tAddMsg{
		border:1px solid #C0C4CD; 
		border-collapse:collapse;
		padding-left:1px;
		padding-rigth:1px;
		padding-top:0px;
		padding-bottom:0px; 
		width:798px;
 		word-break:break-all;
		word-wrap:break-all; 
	}
	.bt_ti{
		font-size:14px;
		font-style:normal;
		font-weight:bold;
		text-align:left;
		padding:1px 1px 1px 1px; 
	}
	
	.tTitle{
		font-size:10px;
		font-style:normal;
		font-weight:bold;
		text-align:left;
	}
	.t_title{
		font-size:9px;
		// font-style:normal;
		text-align:left;
		padding-top:5px;
		/* text-align:center; 
		font-weight:bold; */
	}
}
</style>


<script type="text/javascript">

//表头
//得到拼装的html，list为要打印的数值集合（查询出来的集合,只有一条数据），nameList,为要打印的所有数据的json格式（页面上固定的json格式）
function getHeadHtml(list,nameList){
//	var html =  "<p>&nbsp;&nbsp;&nbsp;&nbsp;";
//	$.each(nameList,function(keyName,valName){
//		for(var key in list){
//			if(keyName==key){
//				html+="<font color='green' class='tTitle'>"+valName+"：</font><label class='t_title'>"+(list[key]||'无')+"，</label>" ;
//			}
//		}
//	});
//	html=html.substring(0,html.length-9)
//	return html+='。</label></p>';
	
	for(var key in list){
		if(list[key]!=null){
			$("#table_id").find("td").find("label").each(function (){
				if($(this).attr("id").replace('print_lab_','') == key){
					debugger;
					var text=funGetKeyAndV(key,list[key]);
					$(this).html(text);
				}
			});
		}
	}
//	$("#elereg_nemsListTable_print tr").not(":first").remove();
}

//表体
//得到拼装的html，list为要打印的数值集合（查询出来的集合），jsonList,为要打印的所有数据的json格式（页面上固定的json格式）
//type为类型，对应为相应的表体，料件，耗料，附件等等
function getHtml(list,jsonList,type){
	var html ="";
	for(var i = 0; i<list.length;i++){
		html+="<li>";
		$.each(jsonList,function(keyName,valName){
			for(var key in list[i]){
				if(keyName && list[i][keyName]==undefined){
					html+="<font color='green' class='tTitle'>"+valName+"：</font><label class='t_title'>无，</label>" ;
					return;
				}else if(keyName==key){
					var key_value=funGetKeyAndV(key,list[i],type);
					html+="<font color='green' class='tTitle'>"+valName+"：</font><label class='t_title'>"+key_value+"，</label>" ;
				}							
			}
		});
		html=html.substring(0,html.length-9)
		html+='</label></li>';
	}
	return html;
}

//对表格数据进行赋值，tableid为表格id，valueList为value值数据，NameList为要name显示的列
//create by zhangkang
function getHtmlBT(table_id,Valuelist,NameList){
	var html = "";
	$("#"+table_id+" tr").not(":first").remove();
	for(var i = 0; i<Valuelist.length;i++){
       html+= "<tr style='width:100%;'>" ;
        $.each(NameList,function(keyName,valName){
            for(var key in Valuelist[i]){
                if(valName && Valuelist[i][valName]==undefined){
                    html+="<td class='t_title'> </td>" ;
                    return;
                }else if(valName==key){
                	html+="<td class='t_title'>"+funGetKeyAndV(valName,Valuelist[i][valName])+" </td>"  ;
                }
            }
        });
        html+=" </tr>";
    }
	$("#"+table_id).append(html);
}

funGetKeyAndV方法举例

//判断key和list，还有type等等
function funGetKeyAndV(name,key){
	switch(name){
		case "inType": return funType(key||'');
		case "cusmExeMarkcd": return funMark(key||'');
		case "modfMarkcd": return funmodfMarkcd(key||'');
		case "acmpFormTypecd": return functTypecd((key||''));
		default :return (key=='0' ? '0' : (key||''));
	}
	return (key||'');
}


function funType(val){
	switch(val){
		case "1" : return "一线入区";
		case "2" : return "二线入区";
		case "3" : return "结转入区";
		default :return val;
	}
}

function funmodfMarkcd(val){
    switch(val){
        case "1" : return "修改";
        case "3" : return "增加";
        case "2" : return "删除";
        default :return val;
    }
}