AngularJS Print Hidden Div

Recentemente è arrivato un progetto che ho bisogno di stampare una parte specifica di una pagina. Attualmente è un elenco dinamico di fisarmoniche che un utente può espandere e visualizzare i risultati. L'utente ha la possibilità di stampare i contenuti della fisarmonica espansa, ma solo quella che l'utente ha ampliato.AngularJS Print Hidden Div

Il mio codice di accorddion è come questo:

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

Ciò potrebbe avere zero o più elementi per espandere. Attualmente ho un div nascosto che usa AngularJS per nascondere parte del contenuto. Ogni sezione di fisarmonica è diversa.

ho cercato di stampare questo in due modi diversi:

Codice 1:

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;

Questo funziona, tuttavia, questo codice riscrive il contenuto della pagina e quando clicco indietro sulla pagina, Aggiorna l'intera pagina.

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

Questo non funziona così bene con AngularJS. Quando apro la nuova finestra, viene inviato solo il contenuto statico. Quindi il contenuto che supponiamo di essere nascosto nel div non è nascosto.

Goal Prendere il contenuto del nascosto div, che utilizza AngularJS per nascondere il contenuto in modo dinamico e stamparlo.

HiddenDiv

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

I campi sono nascosti basati sui valori della voce, che assomiglierà a quello che la fisarmonica ha.

fonte

2016-01-21 Brandon Wilson

Puoi creare un cestino o un biscotto, per favore? Sono sicuro che una volta che l'hai fatto avrai una risposta in pochi minuti .. –

Proverò a mettere questo in un violino, ma c'è qualcosa che non è chiaro? Il codice 1 scrive un nuovo contenuto di una pagina e chiama 'window.print()' quindi, una volta terminato, riporta i contenuti originali sulla pagina. Ma quando questo è fatto, quando l'utente fa clic sulla pagina, si aggiorna. Il codice 2 ottiene l'HTML del 'div' nascosto e lo inserisce in una nuova finestra. Ho il sospetto poiché è una nuova finestra che non coinvolge AngularJS, quindi non sa cosa nascondere. –

Vuoi nascondere, nella stampa, cosa nasconde l'angolare? –

Hai solo bisogno di aggiungere un tag style con:

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

codice completo: (Questo lavoro non funziona nel frammento Per vedere l'effetto andare il bin.)

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>

fonte

2016-01-21 12:59:55

Grazie, una cosa così semplice, ma mi ha lasciato stufato per così tanto tempo! –

Il mio piacere;) Buona fortuna! –

AngularJS Print Hidden Div

risposta

Problemi correlati