前端实现打印功能（筛选打印表格）
2019-02-21 本文已影响0人
莫言_jc
- 前端实现打印也并没有那么难。起初是后端实现打印，前端调取接口，但无法实现单选框的样式，无法对数据进行筛选，这才选择前端实现打印
- 页面数据
<!-- 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();
打印后.png
对比打印前与打印后，将单据张数为0不打印
