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

Print Div Content with print preview using JavaScript on
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

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

<html xmlns="">
<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 ='', '', 'left=0,top=0,toolbar=0,sta­tus=0');
    <form id="form1" runat="server">
    <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
    <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
    <br />   
    <asp:ImageButton ID="imgBtnPrint" runat="server" ImageUrl="~/Print_button.png" OnClientClick="javascript:PrintDivContent('divToPrint');" />
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."
Next Post »


Click here for comments
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

robin singh
July 19, 2014 ×

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

DOT NET Course in Chennai

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.

December 08, 2015 ×

How can we add background color to the print div?

January 04, 2016 ×

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

February 08, 2016 ×

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


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