- 前端實(shí)現(xiàn)打印也并沒(méi)有那么難鞋仍。起初是后端實(shí)現(xiàn)打印，前端調(diào)取接口颈娜，但無(wú)法實(shí)現(xiàn)單選框的樣式自晰，無(wú)法對(duì)數(shù)據(jù)進(jìn)行篩選凝化，這才選擇前端實(shí)現(xiàn)打印
- 頁(yè)面數(shù)據(jù)
<!-- HTML部分 -->
<table class="Btable" id="BtableA" border=.5 cellpadding="0" cellspacing="0">
<thead>
<tr>
<th colspan="3" style="border:none;font-size:18px">票據(jù)類(lèi)</th>
</tr>
<th class="printThA1">單據(jù)名稱</th>
<th class="printThA2">單據(jù)張數(shù)</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')
// 創(chuàng)建tr標(biāo)簽
let tr1=document.createElement("tr");
// 當(dāng)amount數(shù)據(jù)為0時(shí)稍坯，添加noPrint（需要隱藏的tr）
if(BodyTableList1[i].amount=='0'){
tr1.setAttribute('class','noPrint')
}
tr1.innerHTML=tableTr
type1.appendChild(tr1)
}
打印前.png
我這里將動(dòng)態(tài)生成的數(shù)據(jù)放進(jìn)tbody中酬荞，在生成數(shù)據(jù)時(shí)如果單據(jù)張數(shù)為0時(shí)搓劫，要給當(dāng)前tr添加class="noPrint"，在打印時(shí)不顯示
注意：
2.打印
<!-- HTML部分 -->
// 打開(kāi)一個(gè)新的瀏覽器窗口
var win = window.open('');
// 寫(xiě)入
win.document.write(`
<html>
<head>
<title>交接單</title>
</head>
// 打印時(shí)將樣式寫(xiě)入
<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">交接時(shí)間：</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();
打印后.png
對(duì)比打印前與打印后秘蛔，將單據(jù)張數(shù)為0不打印
