Print a Div Using JavaScript in Angularjs Single Page Application

Print a div using javascript in angularJS single page application

$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();
}

Print div with external css using angular js

You can access particular DOM element by using angular.element.find

angular.element.find('test');
console.log(t.html().text())

similar way you can set html of selected DOM to body and print it as per your requirement.

print the content of a HTML DIV

Here is the answer I found

HTML and JS CODE

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

$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();
}

I found it from here

AngularJS Print Hidden Div

You just need to add a style tag with:

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

Full code: (This work will not work in the snippet. To see the effect go the 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>

AngularJs: Display HTML elements from string variable in JSP page

Use AngularJs ng-bind-html directive to render HTML.
( Docs )

<div class="panel-body" ng-bind-html="myvar"></div>

Print the contents of a DIV

Slight changes over earlier version - tested on CHROME

function PrintElem(elem)
{
    var mywindow = window.open('', 'PRINT', 'height=400,width=600');

    mywindow.document.write('<html><head><title>' + document.title  + '</title>');
    mywindow.document.write('</head><body >');
    mywindow.document.write('<h1>' + document.title  + '</h1>');
    mywindow.document.write(document.getElementById(elem).innerHTML);
    mywindow.document.write('</body></html>');

    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/

    mywindow.print();
    mywindow.close();

    return true;
}