在angularJS单页面应用程序中使用javascript打印div
我有一个单页的Web应用程序使用angularJS。 我需要打印某个页面的div。 我尝试了以下内容：
该页面包含几个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> 控制器有以下脚本：
$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; }
此代码打印所需的div，但有一个问题。 声明document.body.innerHTML = originalContents; 因为它是一个SPA，所以取代了整个应用程序的主体。 所以，当我刷新页面或再次点击打印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(); }
需要两个条件函数：一个用于Google Chrome，另一个用于其余的浏览器。
$scope.printDiv = function (divName) { var printContents = document.getElementById(divName).innerHTML; var originalContents = document.body.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></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 + '</html>'); popupWin.document.close(); } popupWin.document.close(); return true; }
您现在可以使用名为angular-print的库
我这样做了：
$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(); }
这是在Chrome和Firefox中为我工作的！ 这将打开小打印窗口，并在点击打印后自动closures。
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();
我不认为有必要写这么多大代码。
我刚刚安装了angular打印凉亭包，所有的设置都去。
只要注入它在模块中，你都准备好了使用预build打印指令和乐趣是，如果你不想打印，你也可以隐藏一些div
http://angular-js.in/angularprint/
我的工作真棒。
