Menu
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.
410
To print the content of div in JavaScript, first store the content of div in a JavaScript variable and then the print button is clicked. The contents of the HTML div element to be extracted.
printPageArea() function contains some JavaScript code which helps you to implement print feature easily in the web page. It will provide the simplest way to print specific area of web page.
Use the ng-print directive on a button to indicate that it is a print button. Use the print-element-id attribute to indicate the id of the element you want to print. For example, if you want to print the whole page you can wrap it in an element with the id of myPage and set the print-element-id attribute to myPage.
You need to execute a separate java-script function. For an angular application it is not a proper way to run javascript out of scope of angular. It will ensure that the external function exist before starting app. It will add more flexibility and control over the java script function in angular.
$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(); } Two conditional functions are needed: one for Google Chrome, and a second for the remaining browsers.
$scope.printDiv = function (divName) { var printContents = document.getElementById(divName).innerHTML; if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { var popupWin = window.open('', '_blank', 'width=600,height=600,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no'); popupWin.window.focus(); popupWin.document.write('<!DOCTYPE html><html><head>' + '<link rel="stylesheet" type="text/css" href="style.css" />' + '</head><body onload="window.print()"><div class="reward-body">' + printContents + '</div></body></html>'); popupWin.onbeforeunload = function (event) { popupWin.close(); return '.\n'; }; popupWin.onabort = function (event) { popupWin.document.close(); popupWin.close(); } } else { var popupWin = window.open('', '_blank', 'width=800,height=600'); 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(); } popupWin.document.close(); return true; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
