Print Document in Landscape Mode using AngularJS

Posted by in AngularJS 1x category on for Beginner level | Points: 250 | Views : 6261 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


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 >

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

    <script src=""></script>    
    <script src="printLandscape.js"></script>
<body ng-app="printLandscapeModule" ng-controller="printLandscapeCtrl">   
    	<div ng-init='printInLandscape()'> 

    			<table boder="2" align="center">
    					<td colspan="4" align="center"><b>Declared Holidays for 2016</b></td>
    					<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>
    					<td>Republic Day</td>
    					<td>Maha Shivratri</td>
    					<td>Ugadi/Gudi Padwa</td>
    					<td>Independence Day</td>
    					<td>Ganesh Chaturthi</td>
    					<td>Dassara - Saraswathi Pooja</td>
    					<td>Kannada Rajayotsava</td>

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

.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


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

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

Posted by: Kasani007 on: 2/15/2017 | Points: 25
hi Niladri ,
i don't want to show the window.print().
i want to show when i click on button it has to print directly to the default printer without showing printpreview dialog
as you have shown
How can i achieve that...please help me
Posted by: Jeni on: 9/23/2017 | Points: 25
Welcome to, the home of low cost, hi-definition print with beautiful design from local studios.

Login to post response

Comment using Facebook(Author doesn't get notification)