Print Document in Landscape Mode using AngularJS

Rajnilari2015
Posted by in AngularJS category on for Beginner level | Points: 250 | Views : 392 red flag

In this article we will look into how to do Print Document in Landscape Mode using AngularJS


 Download source code for Print Document in Landscape Mode using AngularJS

Introduction

From Computer Hope

Landscape mode is the orientation of a page that prints the image horizontally across the page instead of vertically. Landscape mode is commonly used to print charts or other images and text that may not fit properly with the page oriented vertically. The picture to the right is an example of the printer paper orientation setup through printer options. As you can see in the picture, the top example is a paper orientation selected as Portrait, or vertically, and the bottom is selected as Landscape, or horizontally.

In this article we will look into how to do Print Document in Landscape Mode using AngularJS

Straight to Experiment

Let us first make the template say "index.html"

<!DOCTYPE html>
<html >
<head> 
    <title></title>  

	    <style type="text/css">

	    		table {
    				border-collapse: collapse;
    				background: url("images/1.jpg");
				}

				table, td {
    				border: 1px solid black;
				}				

				/* A4 Landscape*/
				@page {
				    size: A4 landscape;				    				   
				}
	  </style> 

    <script src="http://code.angularjs.org/1.2.0rc1/angular.js"></script>    
    <script src="printLandscape.js"></script>
    
</head>
<body ng-app="printLandscapeModule" ng-controller="printLandscapeCtrl">   
    	
    	<div ng-init='printInLandscape()'> 

    		<pre>
    			<table boder="2" align="center">
    				<tr>
    					<td colspan="4" align="center"><b>Declared Holidays for 2016</b></td>
    				</tr>
    				<tr>
    					<td><font color="blue">Sl.No.</font></td>
    					<td><font color="blue">Date</font></td>
    					<td><font color="blue">Day</font></td>
    					<td><font color="blue">Holiday</font></td>
    				</tr>
    				<tr>
    					<td>1</td>
    					<td>14-Jan-16</td>
    					<td>Thursday</td>
    					<td>Makarsankranti/Pongal</td>
    				</tr>
    				<tr>
    					<td>2</td>
    					<td>26-Jan-16</td>
    					<td>Tuesday</td>
    					<td>Republic Day</td>
    				</tr>
    				<tr>
    					<td>3</td>
    					<td>7-Mar-16</td>
    					<td>Monday</td>
    					<td>Maha Shivratri</td>
    				</tr>
    				<tr>
    					<td>4</td>
    					<td>8-Apr-16</td>
    					<td>Friday</td>
    					<td>Ugadi/Gudi Padwa</td>
    				</tr>
    				<tr>
    					<td>5</td>
    					<td>15-Aug-16</td>
    					<td>Monday</td>
    					<td>Independence Day</td>
    				</tr>
    				<tr>
    					<td>6</td>
    					<td>5-Sep-16</td>
    					<td>Monday</td>
    					<td>Ganesh Chaturthi</td>
    				</tr>
    				<tr>
    					<td>7</td>
    					<td>10-Oct-16</td>
    					<td>Monday</td>
    					<td>Dassara - Saraswathi Pooja</td>
    				</tr>
    				<tr>
    					<td>8</td>
    					<td>31-Oct-16</td>
    					<td>Monday</td>
    					<td>Deepavali</td>
    				</tr>
    				<tr>
    					<td>9</td>
    					<td>1-Nov-16</td>
    					<td>Tuesday</td>
    					<td>Kannada Rajayotsava</td>
    				</tr>    				
    			</table>
    		</pre>
    	</div>        
</body>
</html>

We have added the AngularJS reference and added a style sheet for the landscape printing

@page {
	    size: A4 landscape;	    				   
}

The @page is part of CSS 2.1 specification but the size option comes from the CSS 3 Draft Specification

The page design layout looks as under

Now let us add the controller (printLandscape.js) which is as under

angular
.module('printLandscapeModule', [])
.controller('printLandscapeCtrl', function ($scope) {

    $scope.printInLandscape = function(){        
        window.print(); }
});

The above piece of code indicates that we are using the window.print() for printing. This function is invoked when the div is initialized

<div ng-init='printInLandscape()'>

In another word, it is equivalent to the onload Event of javascript which is use for executing a JavaScript immediately after a page has been loaded

Now once we run our application in Chrome, it appears as under

In order to bring the background image, we need to select the Background Graphics of Options

If in case we don't want the headers and footers to appear, please uncheck the Headers and Footers of Options

Conclusion

In this article we have learnt how to print Document in Landscape Mode using AngularJS. Hope this will be helpful. Thanks for reading. Zipped file attached.

Page copy protected against web site content infringement by Copyscape

About the Author

Rajnilari2015
Full Name: Niladri Biswas (RNA Team)
Member Level: Platinum
Member Status: Member,Microsoft_MVP,MVP
Member Since: 3/17/2015 2:41:06 AM
Country: India
-- Thanks & Regards, RNA Team


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)