How to print a div content

<html>
 <head></head>
 <body>
 <style>
 .AP_CONTNT{width: 1000px;}
 .AP_HEAD{border: 1px solid;padding: 7px;background: bisque;}
 .AP_CONTNT1{border: 1px solid;padding: 7px;margin-top: 5px;background-color: cadetblue;}
 .AP_CONTNT2{border: 1px solid;padding: 7px;margin-top: 5px;background-color: cadetblue;}
 .AP_CONTNT2_B1{border: 1px solid;padding: 0px;background: white;}
 .AP_CONTNT2_BC1{border: 0px solid grey;padding: 7px;margin-top:5px;}
 .AP_CONTNT2_BC2{border: 0px solid;padding: 7px;margin-top:5px;}
 .AP_CONTNT2_BC3{border: 0px solid;padding: 7px;margin-top:5px;}
 .table1{border: 1px solid; width:100%;border-collapse:collapse;}
 .table1 tr td{border: 1px solid; }
 .table1 td{padding: 5px;}
 .div_btn{padding:5px;}

 </style>
<!----
This script used to print this div content
---->
 <script>
 function printContent(el)
 {
 var restorepage = document.body.innerHTML;
 var printcontent = document.getElementById(el).innerHTML;
 document.body.innerHTML = printcontent;
 window.print();
 document.body.innerHTML = restorepage;
 }
 </script>

 <div align="center">
 <div class="AP_CONTNT" >
 <div class="AP_HEAD">Testing the print</div>
 </div>
 
 <div class="AP_CONTNT" id="AP_CONTNT">
 <style>
 .AP_CONTNT{width: 1000px;}
 .AP_HEAD{border: 1px solid;padding: 7px;background: bisque;}
 .AP_CONTNT1{border: 1px solid;padding: 7px;margin-top: 5px;background-color: cadetblue;}
 .AP_CONTNT2{border: 1px solid;padding: 7px;margin-top: 5px;background-color: cadetblue;}
 .AP_CONTNT2_B1{border: 1px solid;padding: 0px;background: white;}
 .AP_CONTNT2_BC1{border: 0px solid grey;padding: 7px;margin-top:5px;}
 .AP_CONTNT2_BC2{border: 0px solid;padding: 7px;margin-top:5px;}
 .AP_CONTNT2_BC3{border: 0px solid;padding: 7px;margin-top:5px;}
 .table1{border: 1px solid; width:100%;border-collapse:collapse;}
 .table1 tr td{border: 1px solid; }
 .table1 td{padding: 5px;}
 .div_btn{padding:5px;}

 </style>
 
 <div class="AP_CONTNT1"> ALL DATA IS HERE</div>
 <div class="AP_CONTNT2" id="AP_CONTNT2" style="border: 1px solid;padding: 7px;margin-top: 5px;background-color: cadetblue;">
 
 <div class="AP_CONTNT2_B1">
 <div class="AP_CONTNT2_BC1">
 <table class="table1">
 <?php
 $max_i = 5;
 for ($i = 0; $i <= $max_i; $i++) {
 ?>
 <tr>
 <td>Here My Content</td>
 <td>Here My Content Here My Content Here My Content Here My Content</td>
 </tr>
 <?php
 }
 ?>
 </table>
 </div>
 <div class="AP_CONTNT2_BC2">
 <table class="table1">
 <?php
 $max_i = 5;
 for ($i = 0; $i <= $max_i; $i++) {
 ?>
 <tr>
 <td>The 2nd Data is</td>
 <td>Here My Content Here My Content Here My Content Here My Content</td>
 </tr>
 <?php
 }
 ?>
 </table>
 </div>
 <div class="AP_CONTNT2_BC3"></div>
 </div>
 </div>
 </div>
 <div class="div_btn"><button onclick="printContent('AP_CONTNT')">Print</button></div>
 </div>
 </body>
</html>


<!-- This script used to print this div content -->
<!--here, el= div id -->
 <script>
 function printContent(el)
 {
 var restorepage = document.body.innerHTML;
 var printcontent = document.getElementById(el).innerHTML;
 document.body.innerHTML = printcontent;
 window.print();
 document.body.innerHTML = restorepage;
 }
 </script>

1 thought on “How to print a div content

Leave a Comment