当前位置：网站首页>前台页面打印
前台页面打印
2022-07-25 09:17:00 【zk_Kang】
前台页面就是一个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> ";
// $.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;
}
}
边栏推荐
- Network principle (2) -- network development
- Sticky.js page scrolling div fixed position plug-in
- Disable module (attribute node) in LabVIEW
- MySQL排序
- ActiveMQ -- dead letter queue
- 超赞的yolo目标检测训练所用垃圾分类数据集共享——标注好的约3000张
- How to write the code of wechat applet implementation tab
- Druid 查询超时配置的探究 → DataSource 和 JdbcTemplate 的 queryTimeout 到底谁生效？
- 『怎么用』观察者模式
- ActiveMQ -- leveldb of persistence mechanism
猜你喜欢
超赞的yolo目标检测训练所用垃圾分类数据集共享——标注好的约3000张
What are the commands used by pl/sql tools to export SQL files?
Sort out Huawei ap-3010dn_ V2 configuration create WiFi
Ctfhub skill tree Web
uni-app - Refused to display ‘xxx‘ in a frame because an ancestor violates the following Content Sec
activemq--可持久化机制之JDBC代码
![[deep learning] mask Dino Trilogy - the correct way to open Detr Pandora's box](/img/5c/52ccc0583451eba15fec18adb1499e.png)
[deep learning] mask Dino Trilogy - the correct way to open Detr Pandora's box
JS touch screen game source code ice and snow journey
How to realize the drop-down option box of wechat applet
Activemq-- delayed delivery and scheduled delivery
随机推荐
JS small game source code magic tower breakthrough Download
Arrange the array into the smallest number
uni-app - Refused to display ‘xxx‘ in a frame because an ancestor violates the following Content Sec
Ten thousand words long, one word thoroughly! Finally, someone has made business intelligence (BI) clear
Canvas dynamic picture avatar shaking JS special effect
JDBC快速入门
Shell script
How to use pixi.js to make simple Parkour games
[arm] Xintang nuc977 transplants wk2124 drive
神经网络学习（1）前言介绍
[deep learning] mask Dino Trilogy - the correct way to open Detr Pandora's box
JDBC quick start
对称式加密与非对称式加密的对比
Rich text style word image processing
[stl]stack & queue simulation implementation
Common tool classes under JUC package
黑马程序员JDBC
Full solution of JDBC API
28.插槽
Illustration leetcode - 1184. Distance between bus stops (difficulty: simple)