Print page content placed inside DIV tag with print preview using JavaScript in Asp.net

Print Div Content with print preview using JavaScript on Asp.net
Click on image to enlarge
Introduction: In this article i am going to demonstrate how to print the content placed inside the HTML Div tag with print preview before actual printing using JavaScript in Asp.net.

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.
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,sta­tus=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."
Previous
Next Post »

6 comments

Click here for comments
Ankuj Gupta
admin
June 15, 2014 ×

Nice One....Please Sir Create One Report In which we fetch data from sql server and display in report in same way

Reply
avatar
Unknown
admin
July 19, 2014 ×

Excellent post, your example source code is working great. Can you share some information about creating chat application in Asp.net.

DOT NET Course in Chennai


Reply
avatar
Unknown
admin
October 27, 2015 ×

Hi Lalit,

Can you suggest me a way to print div WITHOUT print preview dialog or WITHOUT poping it up in next tab.

Reply
avatar
Anonymous
admin
December 08, 2015 ×

How can we add background color to the print div?

Reply
avatar
January 04, 2016 ×

Hi, I wish to be a regular contributor of your blog. I have read your blog. Your information is really useful

Reply
avatar
February 08, 2016 ×

Thanks for you feedback..I am glad you liked this article..stay connected and keep reading...

Reply
avatar

If 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..