Ask Question

Print the content of a div element using JavaScript and CSS

0 Vote Up Vote Down

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.

Print the content of a div element using JavaScript

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

 

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>