Post
Ask Question

Print Div Content from a page using Javascript

Here is my aspx page where I have two div of which I want to print 1st div.
 
Here is the trick with small javascript
  1. <%@ Page Language="VB" AutoEventWireup="false" CodeFile="PrintDivContent.aspx.vb" Inherits="Default2" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4.   
  5.      <head>  
  6.           <title>Untitled Page</title>  
  7.           <script language="javascript" type="text/javascript">  
  8.           function printDiv(divID) {  
  9.                //Get the HTML of div  
  10.                var divElements = document.getElementById(divID).innerHTML;  
  11.                //Get the HTML of whole page  
  12.                var oldPage = document.body.innerHTML;  
  13.                //Reset the page's HTML with div's HTML only  
  14.                document.body.innerHTML = "<html><head><title></title></head><body>" + divElements + "</body>";  
  15.                //Print Page  
  16.                window.print();  
  17.                //Restore orignal HTML  
  18.                document.body.innerHTML = oldPage;  
  19.                //disable postback on print button  
  20.                return false;  
  21.           }  
  22.           </script>  
  23.      </head>  
  24.   
  25.      <body>  
  26.           <form id="form1" runat="server">  
  27.                <div id="printablediv" style="width: 100%; background-color: Blue; height: 200px">  
  28.                     Print me I am in 1st Div  
  29.                </div>  
  30.                <div id="donotprintdiv" style="width: 100%; background-color: Gray; height: 200px">  
  31.                     I am not going to print  
  32.                </div>  
  33.                <input type="button" value="Print 1st Div" onclick="javascript:printDiv('printablediv')" />  
  34.           </form>  
  35.      </body>  
  36.   
  37. </html> 
Please Reply if you have any query
Next Recommended Reading Hide and Show DIV using JavaScript