Print a div using javascript in angularJS single page application
Question
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.
7 answers
solution1
89 ACCPTED 2014-03-05 05:49:46
$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();
}
solution2
11 2014-07-09 20:51:16
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;
}
solution3
7 2015-09-04 07:23:53
您现在可以使用名为angular-print的库
solution4
1 2016-08-02 06:50:34
I done this way:
$scope.printDiv = function (div) {
var docHead = document.head.outerHTML;
var printContents = document.getElementById(div).outerHTML;
var winAttr = "location=yes, statusbar=no, menubar=no, titlebar=no, toolbar=no,dependent=no, width=865, height=600, resizable=yes, screenX=200, screenY=200, personalbar=no, scrollbars=yes";
var newWin = window.open("", "_blank", winAttr);
var writeDoc = newWin.document;
writeDoc.open();
writeDoc.write('<!doctype html><html>' + docHead + '<body onLoad="window.print()">' + printContents + '</body></html>');
writeDoc.close();
newWin.focus();
}
solution5
0 2016-06-28 19:38:10
This is what worked for me in Chrome and Firefox! This will open the little print window and close it automatically once you've clicked print.
var printContents = document.getElementById('div-id-selector').innerHTML;
var popupWin = window.open('', '_blank', 'width=800,height=800,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no,top=50');
popupWin.window.focus();
popupWin.document.open();
popupWin.document.write('<!DOCTYPE html><html><head><title>TITLE OF THE PRINT OUT</title>'
+'<link rel="stylesheet" type="text/css" href="app/directory/file.css" />'
+'</head><body onload="window.print(); window.close();"><div>'
+ printContents + '</div></html>');
popupWin.document.close();
solution6
0 2018-10-13 14:00:28
Okay i might have some even different approach.
I am aware that it won't suit everybody but nontheless someone might find it useful.
For those who do not want to pupup a new window, and like me, are concerned about css styles this is what i came up with:
I wrapped view of my app into additional container, which is being hidden when printing and there is additional container for what needs to be printed which is shown when is printing.
Below working example:
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.people = [{ "id" : "000", "name" : "alfred" }, { "id" : "020", "name" : "robert" }, { "id" : "200", "name" : "me" }]; $scope.isPrinting = false; $scope.printElement = {}; $scope.printDiv = function(e) { console.log(e); $scope.printElement = e; $scope.isPrinting = true; //does not seem to work without toimeouts setTimeout(function(){ window.print(); },50); setTimeout(function(){ $scope.isPrinting = false; },50); }; });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <div ng-show="isPrinting"> <p>Print me id: {{printElement.id}}</p> <p>Print me name: {{printElement.name}}</p> </div> <div ng-hide="isPrinting"> <!-- your actual application code --> <div ng-repeat="person in people"> <div ng-click="printDiv(person)">Print {{person.name}}</div> </div> </div> </div>
Note that i am aware that this is not an elegant solution, and it has several drawbacks, but it has some ups as well:
- does not need a popup window
- keeps the css intact
- does not store your whole page into a var (for whatever reason you don't want to do it)
Well, whoever you are reading this, have a nice day and keep coding :)
EDIT:
If it suits your situation you can actually use:
@media print { .noprint { display: none; } }
@media screen { .noscreen { visibility: hidden; position: absolute; } }
instead of angular booleans to select your printing and non printing content
EDIT:
Changed the screen css because it appears that display:none breaks printiing when printing first time after a page load/refresh.
visibility:hidden approach seem to be working so far.
solution7
-4 2017-06-30 12:43:05
I don't think there's any need of writing this much big codes.
I've just installed angular-print bower package and all is set to go.
Just inject it in module and you're all set to go Use pre-built print directives & fun is that you can also hide some div if you don't want to print
http://angular-js.in/angularprint/
Mine is working awesome .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.