Bra*_*son 6 html javascript angularjs
最近有一个项目出现,我需要打印一个页面的特定部分.目前,它是一个动态的手风琴列表,用户可以展开并查看结果.用户可以选择打印扩展的手风琴的内容,但只能打印用户已扩展的内容.
我的代码是这样的:
<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>
根据项目的值隐藏字段,这将类似于手风琴的内容.
您只需要添加一个style标签：
.ng-hide { display: none !important; }
完整代码：（此工作在代码片段中不起作用。要查看效果，请转到bin）
.ng-hide { display: none !important; }
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);
}| 归档时间： |
|
| 查看次数： |
1908 次 |
| 最近记录： |