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

Question

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

2.4k views Asked by B.Balamanigandan At 25 November 2024 at 09:29

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

Original Q&A

There are 1 answers

**AudioBubble** · Accepted Answer · 2016-03-07 05:00:19

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

TechQA.

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

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in ANGULARJS

Related Questions in PRINTING

Related Questions in ANGULARJS-BINDINGS

Popular Questions

Popular Tags

Trending Questions