Bind a value and Print the External HTML using AngularJS without loading into the browser

Question

I'm having 2 HTML Views one is for application purpose and another one is for Printing purpose. Just consider the two file names Application.html and PrintForm.html

Sample HTML Script of Application.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>

Sample HTML Script of PrintForm.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>

If I click the Print hyperlink from Application.html, I need to print PrintForm.html with data binded from app.controller $scope

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

The expected output screen is

I don't need to load the Printing content into the browser, it directly trigger the Printer Dialog to print, after print hyperlink gets hit.

My expected action after hitting the Print Hyperlink in the Application.html should be as

Note: Don't use iFrame or any other inner View for the PrintForm.html

@KavinB - My Requirement is how to send data from one html to another html page, I can't able to make a innerframe. Don't think you are a extraordinary, give solution for my requirement. — B.Balamanigandan, Feb 20 '16 at 02:56
@KevinB Here after don't visit my feature post, because you are polluting the post and you redirecting the vision to the wrong direction. — B.Balamanigandan, Feb 20 '16 at 02:58
So, you want to click on an anchor tag, and have it... open a print dialog that prints the printer friendly view, yes? the ONLY way to do that is either to open a new window with the html you wish to print and calling `window.print()`, or by doing the same with an iFrame. Both of which are described in detail at the linked duplicate — Kevin B, Feb 20 '16 at 03:04
@KevinB We don't support or use iFrame. Kindly refer http://stackoverflow.com/questions/362730/are-iframes-considered-bad-practice I already specified my requirement. give your idea only within my requirement, don't change my primary requirement and model which we are following. — B.Balamanigandan, Feb 20 '16 at 03:20
Then unfortunately there is no way to do what you are asking for. :) — Kevin B, Feb 20 '16 at 03:20
well, i guess you could setup a print-friendly .css file that hides the content you don't want printed, then have the onclick of the anchor tag do "window.print()". — Kevin B, Feb 20 '16 at 03:21
@KevinB In your experience you don't have solution. may be some other may have... then why you closed this post as duplicate. — B.Balamanigandan, Feb 20 '16 at 03:22
@KevinB your activity irritating me. I don't have enough time to debate with you. So, I pleased here after don't interact in my post. I expecting some solution, but your activity puts speed-break. Don't do that. — B.Balamanigandan, Feb 20 '16 at 03:25
Update your question with the additional requirements that would make using an iframe or another window not an option, and i'll reopen it. — Kevin B, Feb 20 '16 at 03:26
@KevinB There is no need to add additional requirement. Enough information is already there. — B.Balamanigandan, Feb 20 '16 at 03:27
The only solution available to you can be found here: http://stackoverflow.com/a/2005833/400654 otherwise I would provide an answer here directly, but that would just be redundant. — Kevin B, Feb 20 '16 at 03:30

score 1 · Accepted Answer · answered Mar 07 '16 at 05:00

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

The Following Source Code will exactly satisfy your requirement.

Bind a value and Print the External HTML using AngularJS without loading into the browser

1 Answers1