绑定值并使用AngularJS打印外部HTML，而无需加载到浏览器中

debugcn 发表于 Dev

巴拉曼尼甘丹

我有2个HTML视图，一个用于应用程序目的，另一个用于打印目的。只需考虑两个文件名Application.html和PrintForm.html

Application.html的示例HTML脚本

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
  
Full Name: {{firstName + " " + lastName}}<br>
<br> Click here to <a href="#">Print</a>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

</body>
</html>

PrintForm.html的示例HTML脚本

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1 class="visible">My First Name is {{  }}</h1>
<h1 class="visible">My Last Name is {{  }}</h1>

<p>The Value fetched from Application.html</p>

</body>
</html>

如果单击Application.html中的“打印”超链接，则需要打印PrintForm.html，并将数据绑定到 app.controller $scope

$scope.firstName = "John";
$scope.lastName = "Doe";

预期的输出屏幕是

我不需要将“打印”内容加载到浏览器中，在单击打印超链接后，它会直接触发“打印机对话框”进行打印。

在按一下Application.html中的“打印超链接”后，我的预期操作应为

注意：请勿将iFrame或任何其他内部View用于PrintForm.html

用户名

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<div>
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
  
Full Name: {{firstName + " " + lastName}}<br>
<br> Click here to <a href="#" ng-click="printDiv('PrintID')">Print</a>

</div>

<div id="PrintID" style="visibility: collapse;">
<h1 class="visible">My First Name is {{ firstName }}</h1>
<h1 class="visible">My Last Name is {{ lastName }}</h1>

<p>The Value fetched from Application.html</p>
</div>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
	
	

$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><title>Print<title></head><body onload="window.print()">' + printContents + '</body></html>');
  popupWin.document.close();
} 
	
});
</script>

</body>
</html>

以下源代码将完全满足您的要求。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。