AngularJS打印隱藏Div

最近一個項目出現了，我需要打印頁面的特定部分。目前，這是一個動態的手風琴列表，用戶可以擴展並查看結果。用戶可以選擇打印擴展手風琴的內容，但只能顯示用戶擴展的內容。AngularJS打印隱藏Div

我的accorddion的代碼是這樣的：

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

這可能是零個或幾個項目擴大。目前我有一個隱藏的div，它使用AngularJS來隱藏一些內容。每個手風琴部分都不同。

我試圖把它打印出來兩種不同的方式：

代碼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;

這個工作，但是，這種代碼重寫頁面內容，當我點擊後面的頁面上，它會刷新整個頁面。

代碼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();

這並不與AngularJS工作這麼好。當我打開新窗口時，只發送靜態內容。因此，假設隱藏在div中的內容未被隱藏。

目標以隱藏div的內容，它使用AngularJS動態隱藏的內容並打印出來。

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>

的字段是基於項目的值，這將類似於什麼手風琴隱藏了。

來源

2016-01-21 Brandon Wilson

請問您可以創建一個bin或小提琴嗎？我敢肯定，一旦你做到了，你會在幾分鐘內得到答案。 –

我會盡力把它放進小提琴中，但是有什麼不清楚的地方？代碼1寫入一個新的頁面內容並調用'window.print（）'，當完成時，將原始內容放回頁面。但是，當完成後，當用戶點擊頁面時，它會刷新。代碼2獲取隱藏的'div'的HTML並將其放入新窗口中。我懷疑，因爲這是一個沒有AngularJS涉及的新窗口，所以它不知道要隱藏什麼。 –

你想在印刷品中隱藏什麼角度隱藏？ –

你只需要添加一個style標籤有：

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

全碼：（這項工作將不會在段工作要看到效果去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>

來源

2016-01-21 12:59:55

謝謝你，這麼簡單的事情，但讓我困擾了這麼久！ –

我的榮幸;）祝你好運！ –

AngularJS打印隱藏Div

回答

相關問題