How to print contents of Div only

Generally we do not want to create complex report and our clients are not interested in purchasing expensive reporting tools then we can generate simple HTML based reports for them. You just have to place your report inside a< div>... < / div> and you can easily print that. Here is a sample through which you can easily print contents of specified div only:-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <script language="javascript" type="text/javascript">
        function printDiv(divID) {
            //Get the HTML of div
            var divElements = document.getElementById(divID).innerHTML; 
            //Get the HTML of whole page
            var oldPage = document.body.innerHTML;
            
            //Reset the page's HTML with div's HTML only
            document.body.innerHTML = "<html><head><title></title></head><body>" + divElements + "</body>";
            
            //Print Page
            window.print();
            
            //Restore orignal HTML
            document.body.innerHTML = oldPage;
            
            //disable postback on print button
            return false;
        }
    </script>
    <title>Div Printing Test Application by Zeeshan Umar</title>
</head>
<body>
    <form runat="server">
    <asp:Button ID="btnPrint" runat="server" Text="Print" OnClientClick="return printDiv('div_print');" />
    <div id="garbage1">I am not going to be print</div>
    <div id="div_print"><h1 style="color: Red">Only Zeeshan Umar loves Asp.Net will be printed :D</h1></div>
    <div id="garbage2">I am not going to be print</div>
    </form>
</body>


Here is the output of the page when I run the code:-



And when I pressed print button, it hide all the remaining area and only my div's contents are visible which will be printed:-


Feel free to comment if you require any clarification. Happy coding !!!

2 comments:

  1. AnonymousApril 12, 2013 at 9:04 AM

    Fantastic items from you, man. I have consider your
    stuff prior to and you're just extremely wonderful. I really like what you've
    acquired right here, really like what you're saying and the way in which you assert it. You're making it enjoyable and you continue to take
    care of to stay it sensible. I can not wait to learn far
    more from you. This is really a tremendous web
    site.

    Here is my webpage legal amphetamines

    ReplyDelete
  2. AnonymousApril 12, 2013 at 9:04 AM

    Fantastic items from you, man. I have consider your stuff
    prior to and you're just extremely wonderful. I really like what you've acquired right here,
    really like what you're saying and the way in which you assert it. You're making it enjoyable and you continue to take care of to stay it sensible.
    I can not wait to learn far more from you. This is really a
    tremendous web site.

    Also visit my web blog :: legal amphetamines

    ReplyDelete