How To Print Specific Part or Div of Webpage Using Javascript

By Saruque Ahamed Mollick

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

Leave a Reply

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