在angularJS单页应用程序中使用javascript打印div

我有一个使用angularJS的单页web应用程序。我需要打印某个页面的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，但出现了问题。语句CCD_ 1替换整个应用程序的主体，因为它是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="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; 
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;
}

您现在可以使用称为角打印的库

我是这样做的：

$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中的工作原理！这将打开小打印窗口，并在单击打印后自动关闭。

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();

好吧，我可能有一些甚至不同的方法。

我知道它不适合所有人，但如果不介意的话，有些人可能会觉得它很有用。

对于那些不想弹出新窗口的人，以及像我一样关心css样式的人，这就是我想到的：

我将应用程序的视图包装到附加容器中，该容器在打印时被隐藏，还有一个附加容器用于打印需要打印的内容，在打印时显示。

以下工作示例：

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>

注意，我知道这不是一个优雅的解决方案，它有几个缺点，但它也有一些优点：

不需要弹出窗口
保持css的完整性
不将整个页面存储到var中(无论出于何种原因，您都不想这样做)

好吧，不管你是谁在读这篇文章，祝你度过美好的一天，继续编码：)

编辑：

如果它适合你的情况，你可以实际使用：

@media print  { .noprint  { display: none; } }
@media screen { .noscreen { visibility: hidden; position: absolute; } }

而不是倾斜角度来选择打印和非打印内容

编辑：

更改了屏幕css，因为它在页面加载/刷新后第一次打印时显示：none会中断打印。

可见性：到目前为止，隐藏方法似乎正在发挥作用。

我认为没有必要写这么大的代码

我刚刚安装了棱角分明的印花蝴蝶结套装，一切都准备就绪。

只需将其注入模块，您就可以开始了使用预先构建的打印指令&有趣的是，如果您不想打印 ，您还可以隐藏一些div

http://angular-js.in/angularprint/

我的工作非常棒。

相关内容

最新更新

热门标签：