How To Print Specific Part or Div of Webpage Using Javascript
By Saruque Ahamed MollickIn this tutorial, I will show you how to Print Specific Part Of Webpage in Javascript
Here print means what we do with ctrl + p on our browser. I am not going to print some line or something on the screen. This is the browser’s built-in print feature. By which I am gonna print particular part of a webpage, not the whole webpage.
Here you gonna learn how to print a particular div element in Javascript.
Move an Element to Mouse Position in JavaScript
print specific part of webpage in Javascript ( HTML Code Part )
So let’s just create some div element first in HTML
<!DOCTYPE html>
<html>
<head>
<title> Javascript Learn </title>
</head>
<body>
<div id="hello">
Hello
</div>
<div id="hi">
HI
</div>
</body>
</html>So, here we have created two different div element.
<div id="hello"> Hello </div> <div id="hi"> HI </div>
We have used two id to identify those div element.
Now let’s Just create a button , so that whenever we click on that button we can print one of these div element.
<!DOCTYPE html>
<html>
<head>
<title>Javascript Learn</title>
</head>
<body>
<div id="hello">
Hello
</div>
<div id="hi">
HI
</div>
<form>
<input type="button" value="Click Me" onclick="codespeedy()">
</form>
</body>
</html>Here we create a button.
Now the most important part, Creating a Javascript function to print a particular div element.
<script type="text/javascript">
function codespeedy(){
var print_div = document.getElementById("hello");
var print_area = window.open();
print_area.document.write(print_div.innerHTML);
print_area.document.close();
print_area.focus();
print_area.print();
print_area.close();
}
</script>So this is the javascript function to print a particular div element from the webpage.
var print_div = document.getElementById("hello");Here we have stored the element data of div id hello in variable print_div.
Now what we need is just calling the function when clicking the button.
So here is the whole code
<!DOCTYPE html>
<html>
<head>
<title>Javascript Learn</title>
</head>
<body>
<div id="hello">
Hello
</div>
<div id="hi">
HI
</div>
<script type="text/javascript">
function codespeedy(){
var print_div = document.getElementById("hello");
var print_area = window.open();
print_area.document.write(print_div.innerHTML);
print_area.document.close();
print_area.focus();
print_area.print();
print_area.close();
// This is the code print a particular div element
}
</script>
<form>
<input type="button" value="Click Me" onclick="codespeedy()">
</form>
</body>
</html>
Here I choose, div id “hello” to be printed.
So it will print only the content’s of the div id hello.
You might be also interested in ,
hi –
I’m a novice at coding and creating my own website.
I was very happy to find your code to create a print button that only printed one div on a page. I’m using Squarespace and your code worked perfectly. My web page in question has multiple photographs and the print button will allow a user to print the photos onto a single output page.
I’d like to modify this code to specify that the final document printed is limited to a single page. Right now one photo prints across 3-4 pages!
I’d be grateful if you could please tell me how to modify the code to do the following:
1) modify your code so that the output is always on a single page;
2) if possible – for example, if the code is used to print two or three divs – how can I modify the code to specify that the print output has the divs side-by-side. For example, I’d like to have two images side-by-side in the final printing page. Alternatively, I’m also interested how to modify the code so each photo (what I’m calling a div) prints in a specific area – for example, photo one takes up the top left 1/3 of the page, photo two takes up the top middle 1/3rd of the page, and photo three takes up the top right 1/3 of the page.
Many thanks!
Best,
Ben
I will soon find a solution and let you know. Or we can wait if anyone from our community has the answer.
Hello and thank you for the code.
I used a similar solution on my wife’s webpage, but I had to duplicate the code for each of the many divs that I want people able to print
I wonder if is there a simple solution to print the div (or section or article) out of many which contain the button. Can maybe “hello” in var print_div = document.getElementById(“hello”) be substituted by a variable sent by the button, so I would change the code only there, or even better make the thing automatic like the button recognizes the container’s id and sends it to the print functions?
Thank you