前端实现打印功能（筛选打印表格）

前端实现打印也并没有那么难。起初是后端实现打印，前端调取接口，但无法实现单选框的样式，无法对数据进行筛选，这才选择前端实现打印

页面数据

  <!-- 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"，在打印时不显示
注意： $\color{red}{样式尽可能的不要写在标签上，由于打印时，是将页面指定的HTML代码添}$
$\color{red}{加到打印页面的，在打印时会将样式打印（这里的样式可能与预期样式不一致）}$
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不打印

\color{red}{暂不考虑兼容性问题}

最后编辑于：2019.03.11 13:46:36