gpt4 book ai didi

javascript - AngularJS 打印隐藏的 Div

转载 作者:太空狗 更新时间:2023-10-29 15:18:43 25 4
gpt4 key购买 nike

最近有一个项目需要打印页面的特定部分。目前它是一个动态 Accordion 列表,用户可以展开并查看结果。用户可以选择打印展开的 Accordion 的内容,但只能打印用户展开的内容。

我的 Accordion 代码是这样的:

 <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 来隐藏一些内容。每个 Accordion 部分都不同。

我尝试用两种不同的方式打印:

代码 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动态隐藏内容并打印出来。

隐藏分区

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

字段根据项目的值隐藏,这类似于 Accordion 的内容。

最佳答案

你只需要添加一个 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>

关于javascript - AngularJS 打印隐藏的 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34923415/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com