Printing using Javascript

Tweet

This post is rewritten with more example in this link

Even there are lots of ways to print the WebPages, the most fast and easy is using JavaScript window.print() function. This article trying to focus on this concept to achieve different format of printing.

1. Let us start with a simple example - printing the content of the page .......

The Requirement – We need to have an hyperlink to print the particular page.

<form id="form1" runat="server">
<div id="Header">
<h1>Viman Aerospace India Ltd</h1>
<p style="text-align:right"><a href="#" style="text-align:right" onclick="window.print();">Print</a></p>
</div>
<div id="Content">
<p>Viman Aerospace Limited started as a Software Service Company for Aerospace Industry in 2012. It provides software service for the avionics system used in Aircaft(Civil and Miltary). Due to good service provided by the company, it slowly developed as Avionics software development company in 2018. It produce software for avionics system like MIL-STD- 1553 etc. After long year of good service, its concentration moved to Aerospace industry. They joined  hands with small aerospace company POC India Limited to produce high ended simulation software. Then, they joined with SYS Group to produce civil Aircraft capable of carrying 200 passengers. Now in 2021 it became the First indian company to produce civil Aircraft indigeneouslly. it has a work force of dedicated 5000 workers working various centres in india. It head quarters lies in Thiruvallur district, Tamilnadu,India </p>
</div>
<div id="Footer">
Copy Right© to Viman™ Company.
</div>
</form>

---

2. Next the requirement is to popup a Print Preview page on click of the hyperlink where the user will have two buttons... Print - to print that preview, Cancel - the close the page and return.

<script language="javascript" type="text/javascript">
function PrintContent()
{
printWindow= window.open ("", "mywindow", "location=0,status=0,scrollbars=1,width=600,height=600");
printWindow.document.write("<div style='width:100%;text-align:left;'>");
printWindow.document.write("<input type='button' id='btnPrint' value='Print' style='width:100px' onclick='window.print()' />");
printWindow.document.write("<input type='button' id='btnCancel' value='Cancel' style='width:100px' onclick='window.close()' />");
printWindow.document.write(document.getElementById('Content').innerHTML);
printWindow.document.write(document.getElementById('Footer').innerHTML);
printWindow.document.write("</div>");
printWindow.document.close();
printWindow.focus();
}
</script>

<div id="Header">
<h1>Viman Aerospace India Ltd</h1>
<p style="text-align:right"><a href="#" style="text-align:right" onclick="PrintContent()">Print Preview</a></p>
</div>
<div id="Content">
<p>Viman Aerospace Limited started as a Software Service Company for Aerospace Industry in 2012. It provides software service for the avionics system used in Aircaft(Civil and Miltary). Due to good service provided by the company, it slowly developed as Avionics software development company in 2018. It produce software for avionics system like MIL-STD- 1553 etc. After long year of good service, its concentration moved to Aerospace industry. They joined  hands with small aerospace company POC India Limited to produce high ended simulation software. Then, they joined with SYS Group to produce civil Aircraft capable of carrying 200 passengers. Now in 2021 it became the First indian company to produce civil Aircraft indigeneouslly. it has a work force of dedicated 5000 workers working various centres in india. It head quarters lies in Thiruvallur district, Tamilnadu,India </p>
</div>
<div id="Footer">
Copy Right© to Viman™ Company.
</div>

---

3. The following examples are coded in ASP.NET 2.0 technology. So let us create a Masterpage which contains Header, Footer, and Left Menu. and another page contains the information about the company with print link.

The Master page (MasterPage.master)

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MasterPage.master.cs" Inherits="Printing.MasterPage" %>
<!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>Printing Examples</title>
</head>
<body>
<form id="form1" runat="server">
<table style="width:100%;height:100%;border:1px;">
<tr style="height:10%;">
<td colspan="2" >
<div id="Header">
<h1>Viman Aerospace India Ltd</h1>
</div>
</td> 
</tr>
<tr style="height:80%;">
<td style="vertical-align:top;">
<asp:TreeView ID="TreeViewMenu" runat="server" DataSourceID="SiteMapDataSource1" >
</asp:TreeView>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" SiteMapProvider="NavigateMenuSitemap" />
</td>
<td style="vertical-align:top;padding-left:10px;">
<div id="Content">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>
</div>
</td>
</tr>
<tr style="height:10%;">
<td colspan="2">
<div id="Footer">
Copy Right© to Viman™ Company.
</div>
</td>
</tr>
</table>
</form>
</body>
</html>

There is a Theam (Default) added into the project. Inside the Default.css file contains the following styles.

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
{
text-align:center;
}
#ContentText
{
text-align:left;
font-size:12px;
font-family:Calibri;
}
#Footer
{
text-align:center;
background-color:Fuchsia;
vertical-align:middle;
height:100%;
width:100%;
}

The page (Sample3.aspx) contains the information about the company with the print hyperlink. On click of that hyperlink the whole page need to be printed (here no print preview).

<%@ Page Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="Sample3.aspx.cs" Inherits="Printing.Sample3" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<p style="text-align:right"><a href="#" style="text-align:right" onclick="window.print()">Print Preview</a></p>
<div id="ContentText">
<p>Viman Aerospace Limited started as a Software Service Company for Aerospace Industry in 2012. It provides software service for the avionics system used in Aircaft(Civil and Miltary). Due to good service provided by the company, it slowly developed as Avionics software development company in 2018. It produce software for avionics system like MIL-STD- 1553 etc. After long year of good service, its concentration moved to Aerospace industry. They joined  hands with small aerospace company POC India Limited to produce high ended simulation software. Then, they joined with SYS Group to produce civil Aircraft capable of carrying 200 passengers. Now in 2021 it became the First indian company to produce civil Aircraft indigeneouslly. it has a work force of dedicated 5000 workers working various centres in india. It head quarters lies in Thiruvallur district, Tamilnadu,India </p>
</div>
</asp:Content>

---

3. Our next attempt is to print the page only the content and not the header, left menu, or footer. To achieve this we need to get the HTML script of the content page and write into the popup window. Let us have a look of this example

<%@ Page Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="Sample3.aspx.cs" Inherits="Printing.Sample3" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script language="javascript" type="text/javascript">
function PrintContent()
{
printWindow= window.open ("", "mywindow", "location=0,status=0,scrollbars=1,width=600,height=600");
printWindow.document.write("<div style='width:100%;text-align:left;'>");
printWindow.document.write("<input type='button' id='btnPrint' value='Print' style='width:100px' onclick='window.print()' />");
printWindow.document.write("<input type='button' id='btnCancel' value='Cancel' style='width:100px' onclick='window.close()' />");
printWindow.document.write(document.getElementById('Content').innerHTML);
printWindow.document.write("</div>");
printWindow.document.close();
printWindow.focus();
}
</script>
<p style="text-align:right"><a href="#" style="text-align:right" onclick="PrintContent()">Print Preview</a></p>
<div id="ContentText">
<p>Viman Aerospace Limited started as a Software Service Company for Aerospace Industry in 2012. It provides software service for the avionics system used in Aircaft(Civil and Miltary). Due to good service provided by the company, it slowly developed as Avionics software development company in 2018. It produce software for avionics system like MIL-STD- 1553 etc. After long year of good service, its concentration moved to Aerospace industry. They joined  hands with small aerospace company POC India Limited to produce high ended simulation software. Then, they joined with SYS Group to produce civil Aircraft capable of carrying 200 passengers. Now in 2021 it became the First indian company to produce civil Aircraft indigeneouslly. it has a work force of dedicated 5000 workers working various centres in india. It head quarters lies in Thiruvallur district, Tamilnadu,India </p>
</div>
</asp:Content>

But this will popup the preview with the hyperlink, because the content page only contains the hyperlink. To avoid showing the hyperlink we can take the HTML script of ContentText div. So the code would change to

printWindow.document.write(document.getElementById('ContentText').innerHTML);

Now the print preview does not have the same style (the colors, alignment defined in the style sheet Default.css). So to include the styles in the print preview add one line of code into the javacript pointing to the style sheet.

printWindow.document.write("<link href=\"App_Themes/Default/Default.css\" type=\"text/css\" rel=\"stylesheet\" />");

Again when the print prints in the priter, it contains the Print, Cancel buttons also. So how to hide this... the window contains two events onbeforeprint(), onafterprint() - that will be triggered before and after the browser taken it for printing.

The following example shows a complete example of the following

1. Shows Print Preview hyperlink
2. On click of that hyperlink - the system shall popup a screen with two buttons (Print and Cancel)
3. On click of Print button, the preview will be send to the printer without Print, Cancel buttons
4. The page shall show with the style (color, font styles etc.,)
5. The Print Preview shall have the proper title (Viman Aerospace India Ltd - Print Preview)

<%@ Page Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="Sample3.aspx.cs" Inherits="Printing.Sample3" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script language="javascript" type="text/javascript">
function PrintContent()
{
var printWindow= window.open ("", "mywindow", "location=0,status=0,scrollbars=1,width=600,height=600");
var strContent = "<html><head><title>Viman Aerospace India Ltd - Print Preview</title>";
strContent = strContent + "<link href=\"App_Themes/Default/Default.css\" type=\"text/css\" rel=\"stylesheet\" />";
strContent = strContent + "<script type=\"text/javascript\" language=\"javascript\">";
strContent = strContent + "function window.onafterprint(){document.getElementById('buttons').style.display = '';}";
strContent = strContent + "function window.onbeforeprint(){document.getElementById('buttons').style.display = 'none';}";
strContent = strContent + "</scr" + "ipt>";
strContent = strContent + "</head><body>";
strContent = strContent + "<div id='buttons' style='width:100%;text-align:right;'>";
strContent = strContent + "<input type='button' id='btnPrint' value='Print' style='width:100px' onclick='window.print()' />";
strContent = strContent + "<input type='button' id='btnCancel' value='Cancel' style='width:100px' onclick='window.close()' />";
strContent = strContent +  "</div>";
strContent = strContent + "<div style='width:100%;'>";
strContent = strContent + document.getElementById('ContentText').innerHTML;
strContent = strContent + "</div>";
strContent = strContent + "</body>";
printWindow.document.write(strContent);
printWindow.document.close();
printWindow.focus();
}
</script>
<p style="text-align:right"><a href="#" style="text-align:right" onclick="PrintContent()">Print Preview</a></p>
<div id="ContentText">
<p>Viman Aerospace Limited started as a Software Service Company for Aerospace Industry in 2012. It provides software service for the avionics system used in Aircaft(Civil and Miltary). Due to good service provided by the company, it slowly developed as Avionics software development company in 2018. It produce software for avionics system like MIL-STD- 1553 etc. After long year of good service, its concentration moved to Aerospace industry. They joined  hands with small aerospace company POC India Limited to produce high ended simulation software. Then, they joined with SYS Group to produce civil Aircraft capable of carrying 200 passengers. Now in 2021 it became the First indian company to produce civil Aircraft indigeneouslly. it has a work force of dedicated 5000 workers working various centres in india. It head quarters lies in Thiruvallur district, Tamilnadu,India </p>
</div>
</asp:Content>