 |
| Click on image to enlarge |
Description: While working on project, it is
very common requirement to print the page content. It becomes very easy using
Javascript. All we need to put the content that we want to print in DIV tag and
create a JavaScript function that takes the id of that DIV tag as parameter and do
the required work for you.
In previous articles i explained How to Count and display remaining characters in the multiline textbox and Show Validation guidelines in web forms using JavaScript and Implement JavaScript validation in asp.net website and Message box in asp.net website using JavaScript and Close Ajax ModalPopUpExtender on Background click outside the popup window using JavaScript and Highlight textbox,dropdownlist controls on validation failure error using JavaScript
Implementation: Let's create a sample website
page (default.aspx). Below is the complete page's Html:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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 DIV Content using javaScript</title>
<script language="javascript"
type="text/javascript">
function PrintDivContent(divId) {
var printContent = document.getElementById(divId);
var WinPrint = window.open('', '', 'left=0,top=0,toolbar=0,status=0');
WinPrint.document.write(printContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="divToPrint">
This
is a sample content to print<br />
This
is a sample content to print<br />
This
is a sample content to print<br />
This
is a sample content to print
</div>
<br />
<div id="divNotToPrint">
This
is a sample content not to print<br />
This
is a sample content not to print<br />
This
is a sample content not to print<br />
This is a sample content not to print
</div>
<br />
<asp:ImageButton ID="imgBtnPrint"
runat="server"
ImageUrl="~/Print_button.png"
OnClientClick="javascript:PrintDivContent('divToPrint');"
/>
</div>
</form>
</body>
</html>
Notice that there are two div tags in the above
page. But suppose we want to print the content of the first Div only. Then just
pass the Id of the first Div tag to the "PrintDivContent" javascript
fucntion from the onClientClient event of ImageButton. I have used ImageButton and
assigned the Print_button.png Image downloaded from internet in the ImageUrl attribute in the above example.
You can search on internet for the any print button image and use that or you can use
simple Button control.
Now over to you:
" I hope you have got the easiest trick to print the div content using javascript in Asp.Net and
If you like my work; you can appreciate by leaving your comments, hitting
Facebook like button, following on Google+, Twitter, Linked in and Pinterest,
stumbling my posts on stumble upon and subscribing for receiving free updates
directly to your inbox . Stay tuned and stay connected for more technical
updates."
6 comments
Click here for commentsNice One....Please Sir Create One Report In which we fetch data from sql server and display in report in same way
ReplyExcellent post, your example source code is working great. Can you share some information about creating chat application in Asp.net.
ReplyDOT NET Course in Chennai
Hi Lalit,
ReplyCan you suggest me a way to print div WITHOUT print preview dialog or WITHOUT poping it up in next tab.
How can we add background color to the print div?
ReplyHi, I wish to be a regular contributor of your blog. I have read your blog. Your information is really useful
ReplyThanks for you feedback..I am glad you liked this article..stay connected and keep reading...
ReplyIf you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..