-1

我有 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 打印

我不需要将打印内容加载到浏览器中，它直接触发打印机对话框打印，打印超链接被点击后。

在 Application.html 中点击打印超链接后我预期的操作应该是

打印对话框

注意：不要对 PrintForm.html 使用 iFrame 或任何其他内部视图

4

1 回答 1

1 

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

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

于 2016-03-07T05:00:19.590 回答