In this article we will look into how to do 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.