Print a div using javascript in angularJS single page application

javascript angularjs html printing single-page-application
Priyatam Roy picture Priyatam Roy · Mar 5, 2014 · Viewed 112.7k times · Source

I have a single page web application using angularJS. I need to print a div of certain page. I tried the following:

The page contains few div (print.html)

<div>
  <div>
    Do not print
  </div>
  <div id="printable">
    Print this div
  </div>
  <button ng-click="printDiv('printableArea');">Print Div</button>
</div>

The controller has following script:

$scope.printDiv = function(divName) {
    var printContents = document.getElementById(divName).innerHTML;
    var originalContents = document.body.innerHTML;        
    document.body.innerHTML = printContents;
    window.print();
    document.body.innerHTML = originalContents;
}

This code prints the desired div but there is a problem. the statement document.body.innerHTML = originalContents; replaces the body of the whole application since it is a SPA. So when I refresh the page or click on print button again, the whole content of the page is erased.

Answer

Anand Natarajan picture Anand Natarajan · Mar 5, 2014 
$scope.printDiv = function(divName) {
  var printContents = document.getElementById(divName).innerHTML;
  var popupWin = window.open('', '_blank', 'width=300,height=300');
  popupWin.document.open();
  popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + printContents + '</body></html>');
  popupWin.document.close();
}

Related questions

AngularJS - Value attribute on an input text box is ignored when there is a ng-model used?

Using AngularJS if I set a simple input text box value to something like "bob" below. The value does not display if the ng-model attribute is added. <input type="text" id="rootFolder" ng-model="rootFolders" disabled="disabled" value="Bob" size="40"/&…

Read More
Can one AngularJS controller call another?

Is it possible to have one controller use another? For example: This HTML document simply prints a message delivered by the MessageCtrl controller in the messageCtrl.js file. <html xmlns:ng="http://angularjs.org/"> <head> <…

Read More
Way to ng-repeat defined number of times instead of repeating over array?

Is there a way to ng-repeat a defined number of times instead of always having to iterate over an array? For example, below I want the list item to show up 5 times assuming $scope.number equal to 5 in addition incrementing …

Read More