How to add a button to print an HTML page?

To add a “PRINT” button on your HTML webpage which, when clicked, prints the whole webpage. This is a fairly simple functionality to add in a webpage and can be added using some HTML elements and plain JavaScript.

Therefore, let us discuss the approach for doing so.


  • Firstly, add a <input /> tag inside the HTML dom.

  • Assign its type attribute to “button” and give it some value.

  • Then assign an “onclick” handler to the input which will be handled using JavaScript.

  • The function that handles the click event of input tag will look like this −

const handlePrint = () => {

The complete code for this approach will be −


<!DOCTYPE html>
<html lang="en-US">
  	   Adding Print Button
   <body style="color: black;">
      <h1>Hello World!</h1>
      <p>Welcome to my Website</p>
         This website is built using plain JS and HTML.
      Okay Bye!!!
      <input value='Print' type='button' onclick='handlePrint()' />
      <script type="text/javascript">
         const handlePrint = () => {
            var actContents = document.body.innerHTML;
            document.body.innerHTML = actContents;

Updated on: 09-Feb-2023

7K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started