在打印顶部获得空白屏幕AnjularJS

Question

我正在AngularJS中打印发票页面。在这里我正面临一些问题。获得一个空格在打印屏幕

enter image description here

这里我的代码

HTML

<div id="invoice" class="compact"> 
    <div class="invoice-container"> 
     <div class="card md-whiteframe-8dp printclass"> 
      <div class="header"> 
       <div class="invoice-date">10 October 2017</div> 
       <div layout="row" layout-align="space-between stretch"> 
        <div class="client"> 
         <div class="invoice-number mb-8" layout="row" layout-align="start center"> 
          <span class="title">PERFORMA INVOICE</span> 
          <span class="number">PI50/2017</span> 
         </div> 
         <div class="invoice-number mb-8" layout="row" layout-align="start center"> 
          <span class="hsn">HSN CODE:-</span> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<div id="mybutton"> 
    <button class="print" ng-click="vm.takePrint()">Take Print</button> 
</div> 

CSS的顶部

@media print { 
body * { visibility: hidden; } 
.printclass * { visibility: visible; } 

JS

vm.takePrint = takePrint; 
     function takePrint(){ 
     window.print(); 
     } 

我需要做的是去除打印页面顶部的空白区域。 enter image description here

Answer 1

CSS应该是

@media print { 
body * { display: none; } 
.printclass * { display: unset; } 
}