How To Print Specific Part or Div of Webpage Using Javascript

In 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 ,

Print content from a particular div element using jQuery

2 responses to “How To Print Specific Part or Div of Webpage Using Javascript”

  1. Ben says:

    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

    • Faruque Ahamed Mollick says:

      I will soon find a solution and let you know. Or we can wait if anyone from our community has the answer.

Leave a Reply

Your email address will not be published. Required fields are marked *