Service:
angular.module('core').factory('print_service', ['$rootScope', '$compile', '$http', '$timeout','$q', function($rootScope, $compile, $http, $timeout,$q) { var printHtml = function (html) { var deferred = $q.defer(); var hiddenFrame = $('<iframe style="display: none"></iframe>').appendTo('body')[0]; hiddenFrame.contentWindow.printAndRemove = function() { hiddenFrame.contentWindow.print(); $(hiddenFrame).remove(); deferred.resolve(); }; var htmlContent = "<!doctype html>"+ "<html>"+ '<head><link rel="stylesheet" type="text/css" href="/style/css/print.css"/></head>'+ '<body onload="printAndRemove();">' + html + '</body>'+ "</html>"; var doc = hiddenFrame.contentWindow.document.open("text/html", "replace"); doc.write(htmlContent); doc.close(); return deferred.promise; }; var openNewWindow = function (html) { var newWindow = window.open("debugPrint.html"); newWindow.addEventListener('load', function(){ $(newWindow.document.body).html(html); }, false); }; var print = function (templateUrl, data) { $rootScope.isBeingPrinted = true; $http.get(templateUrl).success(function(template){ var printScope = $rootScope.$new() angular.extend(printScope, data); var element = $compile($('<div>' + template + '</div>'))(printScope); var waitForRenderAndPrint = function() { if(printScope.$$phase || $http.pendingRequests.length) { $timeout(waitForRenderAndPrint, 1000); } else { // Replace printHtml with openNewWindow for debugging printHtml(element.html()); printScope.$destroy(); } }; waitForRenderAndPrint(); }); }; var printFromScope = function (templateUrl, scope, afterPrint) { $rootScope.isBeingPrinted = true; $http.get(templateUrl).then(function(response){ var template = response.data; var printScope = scope; var element = $compile($('<div>' + template + '</div>'))(printScope); var waitForRenderAndPrint = function() { if (printScope.$$phase || $http.pendingRequests.length) { $timeout(waitForRenderAndPrint); } else { // Replace printHtml with openNewWindow for debugging printHtml(element.html()).then(function() { $rootScope.isBeingPrinted = false; if (afterPrint) { afterPrint(); } }); } }; waitForRenderAndPrint(); }); }; return { print : print, printFromScope : printFromScope } } ]);
Controller :
var template_url = '/views/print.client.view.html'; print_service.printFromScope(template_url,$scope,function(){ // Print Completed });
Create an ng-hide class in css file. ng-show/hide will not work without the class.
More details (opens new window)
Read Articlehttps://develop.horje.com/learn/1434/reference