You are here: Home » JavaScript » Print selected area

Print selected area

36 Flares 36 Flares ×

Some time we have to print, only some selected area not all screen. To do it, we have to call selected area in a div and define its ID, in below example, i have define two div, first for which i have to print and second for which i don’t print.
For printed div , i define its id divToPrint and for non printed div define id divTonoPrint.

Call a function PrintDiv() for print.
Just try below code to do it. It will run in PHP, .net and others.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script language="javascript">
  function PrintDiv() {    
           var divToPrint = document.getElementById('divToPrint');
           var popupWin = window.open('', '_blank', 'width=766,height=300');
           popupWin.document.open();
           popupWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</html>');
            popupWin.document.close();
                }
</script>
</head>

<body>
<div id="divToPrint">
   <table  width="750" align="center"  >
  
 <tr><td >S.#</td><td colspan="2">Name</td></tr>
 <tr><td >1.</td><td colspan="2">Amit</td></tr>
 <tr><td >2.</td><td colspan="2">Sumit</td></tr>
 <tr><td >3.</td><td colspan="2">Ravi</td></tr>
 <tr><td >4.</td><td colspan="2">Aman</td></tr>
   </table>
    
      </div>
      <div id="divTonoPrint">
   <table  width="750" align="center"  >
  
 <tr><td >S.#</td><td colspan="2">Name</td></tr>
 <tr><td >1.</td><td colspan="2">Suresh</td></tr>
 <tr><td >2.</td><td colspan="2">Deepak</td></tr>
 <tr><td >3.</td><td colspan="2">Rohan</td></tr>
 <tr><td >4.</td><td colspan="2">Praddep</td></tr>
 
 
  </table>
      
      </div>
      
       <div><input type="button" onClick="PrintDiv();" value="Print"></div>
      
</body>
</html>

About Abhishek Sinha

I am Abhishek and I love to code on PHP.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Scroll To Top
36 Flares Twitter 5 Facebook 8 Google+ 17 StumbleUpon 2 Pin It Share 0 LinkedIn 4 36 Flares ×