在打印頂部獲得空白屏幕AnjularJS

我正在AngularJS中打印發票頁面。在這裏我正面臨一些問題。獲得一個空格在打印屏幕在打印頂部獲得空白屏幕AnjularJS

這裏我的代碼

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

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

我需要做的是去除打印頁面頂部的空白區域。 enter image description here

來源

2017-10-17 Divya Rajasekaran

其很難通過代碼來判斷，可以再現上的jsfiddle問題，http://jsfiddle.net或plunker，HTTP：// https：//開頭plnkr .co/edit /？p =預覽 – dreamweiver

https://jsfiddle.net/Alana2597/bd1Ln8nd/但點擊按鈕injsfiddle不顯示打印頁 –

它在這裏工作正常，https://plnkr.co/edit/6DTWaqrjHJ4sipmHowls?p =信息 – dreamweiver

CSS應該是

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

來源

2017-10-17 05:56:05

在打印頂部獲得空白屏幕AnjularJS

回答

相關問題