在angularJS单页面应用程序中使用javascript打印div [英] Print a div using javascript in angularJS single page application
问题描述
我有一个使用angularJS的单页网页应用程序。我需要打印某个页面的div。
我尝试了以下方法：
页面包含几个div（print.html）
< DIV>
< div>
不要打印
< / div>
< div id =可打印>
打印此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。所以，当我刷新页面或再次点击打印按钮时，页面的全部内容都会被删除。
$ 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 =stylesheettype =text / csshref =style.css/>< / head>< ; body onload =window.print（）>'+ printContents +'< / body>< / html>'）;
popupWin.document.close（）;
}
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.
$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();
}
这篇关于在angularJS单页面应用程序中使用javascript打印div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
