Geek Answers Handbook

AngularJS Print Hidden Div

A project has recently appeared that I need to print a specific part of the page. This is currently a dynamic accordion list that the user can expand and see the results. The user has the ability to print the contents of the extended accordion, but only the one that the user has expanded.

My accordion code is as follows:

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

This may have zero or more items to expand. I currently have a hidden div that uses AngularJS to hide part of the content. Each section of the accordion is different.

I tried to print two different ways:

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

This works, however, this code overwrites the contents of the page, and when I click on the page, it refreshes the entire page.

Code 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();

This does not work so well with AngularJS. When I open a new window, only static content is sent. Thus, the content that is supposed to be hidden in the div is not hidden.

Purpose Take the contents of a hidden div that AngularJS uses to hide content dynamically and print it.

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>

Fields are hidden depending on the values ​​of the element, which will resemble what the accordion has.

+6
source share
1 answer

You just need to add the style tag with:

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

Full code: (This work will not work in the fragment. To see the effect, go to 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>
0
source

More articles:


All Articles