Web page printing using Javascript

Event there are lots of ways to print the web pages, the most fast and easy way is using window.print() function. This actually equals to using File -> Print from browser. It opens the Print dialog to ask the user to select the Printer and paper Size etc. before printing.

In this post we are going to look at the various ways to print the web page using window.print() function. (I tried to cover all possible scenarios we are facing, but if you feel we required more scenarios to include please feel free to comment on the blog). I will try to include those also.

I am planning to cover this in multiple parts. Please verify the last section of the article for more information

In this post I am going to provide an example web page which is going to be used for subsequent parts. Suggest you to move to the related page and look at the code if you required quick code snippet.

Lets start to implement the first scenario.

Before we are going for any example, I wish create a page where we can play with lot more examples. For example, I am designing a webpage which is same like a news portal. The page is used to show the latest news on a particular topic.

The page scripts are:

html, body, form {
height: 100%;
width: 100%;
}
body
{
font-family: Calibri, Helvetica, sans-serif;
font-size: 13px;
color: #000000;
margin: 0;
padding: 0;
text-align: left;
background-color: White;
}
#header
{
height:100px;
width:100%;
}
#header ul.newsMenu 
{
margin-left: 0px;
padding-left: 0px;
margin-top:2px;
margin-bottom:0px;
}
#header ul.newsMenu li {
display: inline;
background-color: #C0C0C0;
border-style: outset;
border-width: 1px;
}
#header ul.newsMenu li a {
text-decoration: none;
padding-left: 1em;
padding-right: 1em;
}
#header ul.newsMenu li a:hover {
background-color: #D0D0D0
}
#header .headlines
{
background-color:#F5A9F2;
}
#content
{
text-align:left;
font-size:12px;
font-family:Calibri;
min-height:430px;
width:100%;
}
#footer
{
margin-top:50px;
border:solid 0A0909 2px;
border:1px;
text-align:center;
height:60px;
width:100%;
border-top:2px;
min-height:60px;
}
#footer ul
{
list-style-type:none;
}
#footer li
{
display: inline
}

ul.buttonMenu
{
margin-left: 0px;
padding-left: 0px;
}
ul.buttonMenu li {
display: inline;
background-color: #C0C0C0;
border-style: outset;
border-width: 1px;
}
ul.buttonMenu li a {
text-decoration: none;
padding-left: 1em;
padding-right: 1em
}
ul.buttonMenu li a:hover {
background-color: #D0D0D0
}
.spotlight
{
background-color:Yellow;
border:solid 1px black;
border-bottom:1px;
border-left:0px;
border-right:0px;
border-top:0px;
}
#title
{
color:#092991;
}
#news
{
padding-left:10px;
padding-right:10px;
font-size:13px;
}

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="NormalPrint.aspx.cs" Inherits="Printing.NormalPrint" Theme="Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Print Sample</title>
</head>
<body>
    <form id="form1" runat="server">
        <div id="header">
            <div style="height:60px;">
                <div style="float:left;background-color:#2E9AFE;width:25%;height:100%;">
                    <h1 style="margin:0px;">TrueWins Media</h1>
                    <strong>Tue, 18 Jan 2011</strong>
                </div>
                <div style="float:left;background-color:#FF8000;width:75%;height:100%;">
                    Advertisement
                </div>
            </div>
            <div style="height:20px;background-color:#AC5A5A;">
                <ul class="newsMenu" style="height:10px;">
                    <li><a href="http://www.truewins.com/default.aspx">Home</a></li>
                    <li><a href="http://www.truewins.com/news.aspx">News</a></li>
                    <li><a href="http://www.truewins.com/views.aspx">Views</a></li>
                    <li><a href="http://www.truewins.com/business.aspx">Business</a></li>
                    <li><a href="http://www.truewins.com/cricket.aspx">Cricket</a></li>
                    <li><a href="http://www.truewins.com/lifestyle.aspx">Lifestyle</a></li>       
                    <li><a href="http://www.truewins.com/photos.aspx">Photos</a></li>
                    <li><a href="http://www.truewins.com/audio.aspx">Video</a></li>
                    <li><a href="http://www.truewins.com/events.aspx">Events</a></li>
                    <li><a href="http://www.truewins.com/entertainment.aspx">entertainment</a></li>
                    <li><a href="http://www.truewins.com/weather.aspx">Weather</a></li>
                    <li><a href="http://www.truewins.com/epaper.aspx">ePaper</a></li>
                    <li><a href="http://www.truewins.com/classifieds.aspx">Classifieds</a></li>
                </ul>
            </div>
            <div><marquee class="spotlight" scrollamount="1">Sensex opens up by 75 points on firm global cues || Goldman Sachs warns against investing in India, China || Investors cheer Axis Bank Q3 nos; scrip jumps 5.62 pc || Sensex gains for 2nd day; rises by 210 pts || Oil supplies from Iran not hurt by payments issue: Essar || SEBI effect: ADAG stocks rattled || Sensex snaps 2-day falling streak on selective buying; up 22 pts</marquee></div>
        </div>
        <div id="content">
            <div style="float:right;">
                <ul class="buttonMenu">
                    <li><a href="#" onclick="window.print()">Print</a></li>
                    <li><a href="http://www.truewins.com/default.aspx">Email</a></li>
                    <li><a href="http://www.truewins.com/default.aspx">Comment</a></li>
                    <li><a href="http://www.truewins.com/default.aspx">Share</a></li>
                </ul>
                <div style="height:250px;width:250px;background-color:#6BD451;text-align:center;border:solid 1px black;">
                    <p style="padding-top:100px;font-size:medium;">Advertisement</p>
                </div>
                <div style="height:150px;width:250px;background-color:#6BD451;text-align:center;border:solid 1px black;">
                    <span style="font-size:13px;">Related Topics</span>
                    <ul style="text-align:left;margin-left:20px;margin-top:5px;">
                        <li><a href="#">Petrol price should have been hiked by Rs 3.72, says IOC</a></li>
                        <li><a href="#">Oil price over $100 'not unrealistic', says Iran</a></li>
                        <li><a href="#">Oil price over $100 'not unrealistic', says Iran</a></li>
                        <li><a href="#">ADAG-SEBI settlement charge at record Rs 50 cr</a></li>
                    </ul>
                </div>
            </div>
            <div id="news">
                <h3 id="Title">Sensex rises in noon trade</h3>
                <div id="newsRelatedAd" style="width:700px;height:100px;background-color:#FE2EF7"></div>
                <p>A benchmark index of Indian equities markets Tuesday rose in noon trade, helped by strong earnings reported by corporates. Gainers in front-line stocks were led by IT and telecom firms. The 30-scrip sensitive index (Sensex) of the Bombay Stock Exchange (BSE), which opened at 18,983.2 points, was ruling at 19,008.28 points -- up 126.03 points or 0.67 % from its previous close at 18,882.25 points.</p>
                <p>The 50-scrip S&P CNX Nifty of the National Stock Exchange too was in the green, trading 36.55 points or 0.65 % higher at 5,691.3 points.</p>
                <p>Broader markets were, however, trading dull, with the BSE midcap index ruling 0.24 % up and the BSE smallcap index trading 0.34 % higher.</p>
                <p>Realty, power and energy stocks saw some selling, while gains were seen in IT and telecom scrips.</p>
                <p>The market breadth was positive, with 1,431 stocks advancing compared to 1,133 scrips on the decline, while 107 stocks remained unchanged.</p>
                <p>Among gainers on the Sensex were TCS, Wipro, Cipla and Tata Motors, while the losers included Tata Power, Reliance Infra, Jindal Steel and DLF.</p>
                <p>Most other Asian stock markets were ruling higher Tuesday, except the Chinese stocks markets which continued to loose after the Chinese central bank's latest move to tighten monetary policy cast a gloom on trading.</p>
                <p>The Chinese Shanghai Composite index shed 0.44 % to trade at 2,694.68 points, while Hong Kong's Hang Seng was ruling 0.75 % higher at 24,339.27 points.</p>
                <p>The Japanese Nikkei closed flat at 10,518.98 points.</p>
            </div>
        </div>
        <div id="footer">
            <div>
                <ul>
                    <li><a href="http://www.truewins.com/default.aspx">Home</a></li>
                    <li>|</li>
                    <li><a href="http://www.truewins.com/news.aspx">News</a></li>
                    <li>|</li>
                    <li><a href="http://www.truewins.com/views.aspx">Views</a></li>
                    <li>|</li>
                    <li><a href="http://www.truewins.com/business.aspx">Business</a></li>
                    <li>|</li>
                    <li><a href="http://www.truewins.com/cricket.aspx">Cricket</a></li>
                    <li>|</li> 
                    <li><a href="http://www.truewins.com/lifestyle.aspx">Lifestyle</a></li>       
                    <li>|</li>    
                    <li><a href="http://www.truewins.com/photos.aspx">Photos</a></li>
                    <li>|</li>
                    <li><a href="http://www.truewins.com/audio.aspx">Video</a></li>
                    <li>|</li>
                    <li><a href="http://www.truewins.com/events.aspx">Events</a></li>
                    <li>|</li>
                    <li><a href="http://www.truewins.com/entertainment.aspx">entertainment</a></li>
                    <li>|</li>        
                    <li><a href="http://www.truewins.com/weather.aspx">Weather</a></li>
                    <li>|</li>
                    <li><a href="http://www.truewins.com/epaper.aspx">ePaper</a></li>
                    <li>|</li>
                    <li><a href="http://www.truewins.com/classifieds.aspx">Classifieds</a></li>
                </ul>
            </div>
            <div>
                <ul style="margin:0px;">
                    <li><a href="http://www.truewins.com/AbountUs.aspx" target="_blank">About us</a></li>
                    <li>|</li>
                    <li><a href="http://www.truewins.com/ContactUs.aspx" target="_blank">Contact us</a></li>
                    <li>|</li>
                    <li><a href="http://www.truewins.com/Careers.aspx" target="_blank">Careers</a></li>
                    <li>|</li>
                    <li><a href="http://www.truewins.com/privacypolicy.aspx" target="_blank">Policy</a></li>
                    <li>|</li>
                    <li><a href="http://www.truewins.com/Disclaimer.aspx" target="_blank">Disclaimer</a></li>
                    <li>|</li>
                    <li><a href="http://www.truewins.com/sitemap/sitemap.aspx" target="_blank">Sitemap</a></li>
                </ul>
                <div>Copyright © 2011 TrueWins Media Limited. All Rights Reserved.</div>
            </div>
        </div>
    </form>
</body>
</html>

public partial class NormalPrint : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}

In this example, The page contains header, footer, menu, some advertisements on the top and right side and related tops links. When the user clicks the Print button (on the right top), the page calls window.print() function to show the Print dialog.

The output of the page looks like this.

Page to be used for printing using Javascript

This example prints the whole page.

Download the Source Code here.

The other links on How to print Web Page Using Javascript:

Thiru Technical blog

Sunday 13 February 2011

Web page printing using Javascript

0 Responses to “Web page printing using Javascript”

Post a Comment

Follow the Blog

Translate

Labels

Followers