在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屋!