Printing content of a particular div

 1) Put media css “display:none” for other element except the div to print.
                <style type=”text/css” media=”print” >
           .nonPrintable{display:none;} /*class for the element we don’t want to print*/
        2) Dynamically create a document and open in a new window. The popup window will only contain the content of the div which is to be printed.
On body load of the opened child window we will simply call window.print() method. Now the current window contains only the parent div contens,so our problem is solved.
I implemented the second technique and it works great with all the browsers. So I am sharing the code below. Copy paste the following code and save it with .html extension. Run in browser (allow block content for IE)
     <script type=”text/javascript”>     
        function PrintDiv() {    
           var divToPrint = document.getElementById(‘divToPrint’);
           var popupWin =‘_blank’,‘width=300,height=300’);
           popupWin.document.write(‘<html><body onload=”window.print()”>’ + divToPrint.innerHTML + ‘</html>’);
        <body >
                other contents
            <div id=”divToPrint” >
               <div style=”width:200px;height:300px;background-color:teal;”>
                  This is the div to print
                <input type=”button” value=”print”onclick=”PrintDiv();” />

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s