AngularJS 打印隐藏分区

AngularJS Print Hidden Div

本文关键字：分区 隐藏 打印 AngularJS      更新时间：2023-09-26

最近出现了一个项目，我需要打印页面的特定部分。目前它是一个动态折叠列表，用户可以展开并查看结果。用户可以选择打印展开的折叠项的内容，但只能打印用户已展开的折叠项。

我的手风琴代码是这样的：

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

隐藏的迪夫

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

完整代码：（这项工作在代码片段中不起作用。要查看效果，请转到垃圾箱）

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>

相关文章：