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

回答

相关问题