AngularJS Print Gizli Div

Son zamanlarda bir sayfanın belirli bir bölümünü yazdırmam gerektiği bir proje geldi. Şu anda bir kullanıcının sonuçları genişletip görebileceği dinamik bir akordeon listesi. Kullanıcı, genişletilmiş akordeonun içeriğini basma seçeneğine sahiptir, ancak sadece kullanıcı genişletilmiş. accorddion aitAngularJS Print Gizli Div

Benim kod şu şekildedir:

<accordion> 
    <accordion-group class="test" ng-repeat="item in ItemsPW"> 
    <uib-accordion-heading> 
     Header Stuff 
    </accordion-heading> 
    <div> 
     <div class="col-sm-1 supply-item-print"> 
      <button class="btn-print btn-success" type="submit" 
      ng-click="printDiv(item.line);"> 
      <span class="glyphicon glyphicon-print" aria-hidden="true"></span> 
      </button> 
     </div> 
    </div> 
    </accordion-group> 
</accordion>

Bu genişletmek için sıfır veya birkaç madde olabilir. Şu anda içeriğin bir kısmını gizlemek için AngularJS kullanan bir gizli div var. Her akordeon bölümü farklıdır.

Kod 1:

Bu iki farklı şekilde yazdırmak için çalıştık Bu benim sayfadaki geri tıkladığınızda, ancak, bu kod sayfası içeriğini yeniden yazar ve çalışır

var restorePage = document.body.innerHTML; 
var printContent = document.getElementById('hiddenDiv').innerHTML; 
document.body.innerHTML = "<html><head><title></title></head><body>" + printContent + "</body>"; 
window.print(); 
document.body.innerHTML = restorePage;

, tüm sayfayı yeniler. Bu angularjs ile çok iyi çalışmıyor 2

var printContents = document.getElementById('hiddenDiv').innerHTML; 
var popupWin = window.open('', '_blank', 'width=1000,height=600'); 
popupWin.document.open(); 
popupWin.document.write('<html><head><link href="public/css/style.css" ' + 
    'rel="stylesheet"></head><body>' + printContents + '</html>'); 
popupWin.document.close();

Kodu. Yeni pencereyi açtığımda sadece statik içerik gönderilir. Dolayısıyla, div'da gizlenmiş olduğu varsayılan içerik gizlenmez.

Hedef dinamik içeriği gizlemek ve onu yazdırmak için angularjs kullandığı gizli div içeriğini ele alalım. alanlar akordeon neler andıracak öğenin değerlere dayalı gizlidir

<table> 
    <tr> 
    <th>Boxes</th> 
    <th>Bags</th> 
    <th>Supplies</th> 
    </tr> 
    <tr> 
    <td><span ng-hide="item.box1 == '0'">Box1</span></td> 
    <td><span ng-hide="item.box2 == '0'">Box2</span></td> 
    <td><span ng-hide="item.Bag1 == '0'">Bag1</span></td> 
    <td><span ng-hide="item.tape == '0'">Tape</span></td> 
    </tr> 
</table>

HiddenDiv.

kaynak

2016-01-21 Brandon Wilson

bir sepet veya keman lütfen yaratabilir mi? Eminim bunu yaptıktan sonra birkaç dakika içinde bir cevap alacaksın .. –

Bunu bir kemanın içine koymaya çalışacağım, ama net olmayan bir şey var mı? Kod 1 yeni bir sayfa içeriği yazar ve 'window.print()' yi çağırır, sonra bittiğinde, orijinal içeriğini sayfaya geri koyar. Ancak bu yapıldığında, kullanıcı sayfaya tekrar tıkladığında, yenilenir. Kod 2 gizli 'div' HTML alır ve yeni bir pencereye koyar. AngularJS'nin içerdiği yeni bir pencere olduğundan şüpheleniyorum, böylece ne saklanacağını bilmiyor. –

Baskıda, açısal gizlemeyi gizlemek ister misiniz? –

Sadece bir style etiket eklemek gerekir:

.ng-hide { display: none !important; }

Tam kodu: (Bu çalışma snippet'te çalışmaz etkisi bin bulabilirsiniz.bulabilirsiniz.)

angular.module('app', []) 
 
.controller('ctrl', function(){ 
 

 
}); 
 

 
function printDiv() { 
 
    var popupWin = window.open('', '_blank', 'width=1000,height=600'); 
 

 
    popupWin.document.write('<html><head><link href="public/css/style.css" ' + 
 
          'rel="stylesheet"><style>.ng-hide { display: none !important; }</style></head><body>' + document.querySelector('#div').innerHTML + '</html>'); 
 

 
    setTimeout(function(){ 
 
    popupWin.print(); 
 
    popupWin.close(); 
 
    }, 500); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="app" ng-controller="ctrl" id="div"> 
 
    Visible 
 
    <div ng-hide="true">Text</div> 
 
</div> 
 

 
<button onclick="printDiv()">Print</button>

kaynak

2016-01-21 12:59:55

Teşekkür ederim, çok basit bir şey, ama beni çok uzun zamandır engelledim! –

Benim için zevk;) İyi şanslar! –

AngularJS Print Gizli Div

cevap

İlgili konular