Wednesday, February 13, 2013

How to Print Content inside a DIV Tag


In the below code there are two div tags and we need to print the content only in one div tag where the both the div tags are on the same page.

<head>
 <style type="text/css">
 #printable { display: none; }
 @media print
 {
     #nonprintable { display: none; }
     #printable { display: block; }
 }
 </style>
</head>
<body>
     <div id="nonprintable"> Non Printable contents </div>
     <div id="printable"> Printable content </div> </body>
The content in the printable div tag is hidden in this example and you can modify the style property as per your requirement. Below Jquery code will enable the printing of the div content. Download the PrintElement Jquery library from here. 
<script src = "jquery-1.8.3.js" type="text/javascript"></script>
 <script src="jquery.printElement.js" type="text/javascript"></script>
<script type="text/javascript">
 function printpage()
{
     $("#printable").printElement();
 }
</script>

No comments:
Write comments
Recommended Posts × +