莫言_jc关注IP属地: 云南
2019.02.21 13:50:19字数 123阅读 6,814
页面数据
<!-- HTML部分 -->
<table class="Btable" id="BtableA" border=.5 cellpadding="0" cellspacing="0">
<thead>
<tr>
<th colspan="3" style="border:none;font-size:18px">票据类</th>
</tr>
<th class="printThA1">单据名称</th>
<th class="printThA2">单据张数</th>
<th class="printThA3">备注</th>
</thead>
<tbody id="type1"></tbody>
</table>
<!-- javascript部分-->
let BodyTableList1=reponse.data.body
let tableTr=''
for(var i in BodyTableList1){
tableTr=` <td id="1typeName`+i+`">`+BodyTableList1[i].typeName+`</td>
<td><input type="text" id="1amount`+i+`" value="`+BodyTableList1[i].amount+`"></td>
<td><input type="text" id="1remarks`+i+`" value="`+BodyTableList1[i].remarks+`"></td>
`
// 获取tbody
let type1=document.getElementById('type1')
// 创建tr标签
let tr1=document.createElement("tr");
// 当amount数据为0时,添加noPrint(需要隐藏的tr)
if(BodyTableList1[i].amount=='0'){
tr1.setAttribute('class','noPrint')
}
tr1.innerHTML=tableTr
type1.appendChild(tr1)
}
打印前.png
我这里将动态生成的数据放进tbody中,在生成数据时如果单据张数为0时,要给当前tr添加class="noPrint",在打印时不显示
注意:
2.打印
<!-- HTML部分 -->// 打开一个新的浏览器窗口
var win = window.open('');
// 写入
win.document.write(`<html>
<head>
<title>交接单</title>
</head>// 打印时将样式写入 <style>
.clearfix:after{
content: "020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
zoom: 1;
}
#detailePrintStyle{
width:100%;
height: 100%;
}
.printTitleSpan{
width:100%;
margin-bottom:10px;
}
.printTitleSpan .titleContent{
float:left;
margin-right:10px;
}
.printTitleSpan .contentStyle{
min-width:100px;
padding:0 5px;
border-bottom:1px solid #ccc;
}
#detailePrintStyle #BtableA{
border:none;
margin-bottom:20px;
}
#detailePrintStyle #BtableA thead tbody{
text-align:center;
width:100%;
}
th{
height:36px;
line-height:36px;
}
tr{
height:36px;
line-height:36px;
}
.printThA1{
width:200px;
}
.printThA2{
width:170px;
}
.printThA3{
width:400px;
}
input{
border:none;
text-align:center;
}
#detailePrintStyle .inputTxt{
border-bottom: 1px solid #000;
}
.noPrint{
display: none;
} </style>
<body>
<div id="detailePrintStyle">`);<!-- javascript部分-->win.document.write(` <div class="printTitleSpan">
<div class="clearfix" style="width:100%">
<div class="titleContent">交出人:</div><div class="titleContent contentStyle">`+this.form.sendName+`</div>
<div class="titleContent">接收人:</div><div class="titleContent contentStyle">`+this.form.receiveName+`</div>
</div>
<br>
<div class="clearfix" style="width:100%">
<div class="titleContent">交接时间:</div><div class="titleContent contentStyle">`+this.form.dateCode+`</div>
<div class="titleContent">所属期间:</div><div class="titleContent contentStyle">`+this.form.periodCode+`</div>
</div>
</div>`);
var tableToPrintA = document.getElementById('BtableA')
win.document.write(tableToPrintA.outerHTML);
win.document.write('</div></body></html>');
win.document.close();//在IE浏览器中使用必须添加这一句
win.focus();//在IE浏览器中使用必须添加这一句
win.print();
win.close();
![](//image109.360doc.cn/DownloadImg/2023/02/1416/260679801_5_20230214042800801.png)
打印后.png
对比打印前与打印后,将单据张数为0不打印
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。