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

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

1. 页面数据

  
  

        

            

                
票据类
            
            
单据名称
            
单据张数
            
备注
        
        

  

  
  let BodyTableList1=reponse.data.body
  let tableTr=''
      for(var i in BodyTableList1){
          tableTr=`
              `+BodyTableList1[i].typeName+`
              
              
                   `
            // 获取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.打印

// 打开一个新的浏览器窗口
var win = window.open('');
// 写入
win.document.write(`

    
        
    
// 打印时将样式写入
    
    
        
`);


win.document.write(`
    

        

            
交出人：
`+this.form.sendName+`
            
接收人：
`+this.form.receiveName+`
        
        

        

            
交接时间：
`+this.form.dateCode+`
            
所属期间：
`+this.form.periodCode+`
                 
        
    
`);
var tableToPrintA = document.getElementById('BtableA')
win.document.write(tableToPrintA.outerHTML);
win.document.write('
');
win.document.close();//在IE浏览器中使用必须添加这一句
win.focus();//在IE浏览器中使用必须添加这一句
win.print();
win.close();

打印后.png

对比打印前与打印后，将单据张数为0不打印