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