印刷画面の上に空白を入れるAnjularJS

Question

私はAngularJS to Print Invoiceページで作業しています。ここで私はいくつかの問題に直面している。印刷画面

ここ

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(); 
     } 

印刷ページの上部にある空白を削除するにはどうすればよいですか。 //ます。https：// plnkr enter image description here

Answer 1

CSSは

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