You can Print the content of a div element using two methods JavaScript and CSS
Print the content of a div element using JavaScript
For this, you create a dynamic page using button click and copy div data (any div or table that you want to print) to that page.
Step 1
So first create a div that you want to print
<!DOCTYPE html> <html> <head> <title> Print the content of a div </title> </head> <body style="text-align:center;"> <div id="print_data_holder"> <h3>Hello Print Me !!!</h3> </div> <input type="button" value="click" onclick="printDiv()"> </body> </html>
Step 2
Second step to create JavaScript function to handle click event and copy div data and pass to new dynamic page
<script> function print_my_div() { var hold_div_data = document.getElementById("print_data_holder").innerHTML; var createDiv = window.open('', '', 'height=1024, width=1024'); createDiv.document.write('<html><head><title>Dynamic Print Page</title></head>'); createDiv.document.write('<body > <h1 style="text-align:center">Dynamic Div contents here <br>'); createDiv.document.write(hold_div_data); createDiv.document.write("<p>Above div is copy from privious Page</p>"); createDiv.document.write('</body></html>'); createDiv.document.close(); createDiv.print(); } </script>
Print the content of a div element using CSS
In CSS you just need the show that div that you want to print and hide remaining
<style type="text/css"> @media print { body * { visibility: hidden; } #print_data_holder, #print_data_holder * { visibility: visible; } #print_data_holder { position: absolute; left: 0; top: 0; } } </style>
Final HTML and JS file of Print the content of a div element using JavaScript-
<!DOCTYPE html> <html> <head> <title> Print the content of a div </title> <style type="text/css"> </style> </head> <body style="text-align:center;"> <div id="print_data_holder" style="text-align:center;margin: auto;width: 50%"> <h3>Hello Print Me !!!</h3> </div> <div id="other_div_with_some_data"> <h3>Other div with some other data</h3> </div> <input type="button" value="click" onclick="print_my_div()"> <script> function print_my_div() { var hold_div_data = document.getElementById("print_data_holder").innerHTML; var createDiv = window.open('', '', 'height=1024, width=1024'); createDiv.document.write('<html><head><title>Dynamic Print Page</title></head>'); createDiv.document.write('<body > <h1 style="text-align:center">Dynamic Div contents here <br>'); createDiv.document.write(hold_div_data); createDiv.document.write("<p>Above div is copy from privious Page</p>"); createDiv.document.write('</body></html>'); createDiv.document.close(); createDiv.print(); } </script> </body> </html>
Final HTML and JS file of Print the content of a div element using CSS-
<!DOCTYPE html> <html> <head> <title> Print the content of a div </title> <style type="text/css"> @media print { body * {visibility: hidden;} #print_data_holder, #print_data_holder * { visibility: visible; } #print_data_holder { position: absolute; left: 0; top: 0; } } </style> </head> <body> <div id="print_data_holder" style="text-align:center;margin: auto;width: 50%"> <h3>Hello Print Me !!!</h3> </div> <div id="other_div_with_some_data"> <h3>Other div with some other data</h3> </div> </body> </html>