-1

私は 2 つの HTML ビューを持っています。1 つはアプリケーション用で、もう 1 つは印刷用です。Application.htmlとPrintForm.htmlという 2 つのファイル名について考えてみましょう。

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 から Print ハイパーリンクをクリックすると、PrintForm.html からデータをバインドして印刷する必要があります。app.controller $scope

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

期待される出力画面は

Application.html から印刷

印刷コンテンツをブラウザーにロードする必要はありません。印刷ハイパーリンクがヒットした後、プリンターダイアログを直接トリガーして印刷します。

Application.html で Print Hyperlink を押した後の私の予想されるアクションは次のようになります。

印刷ダイアログ

注: 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 に答える