How to create a pop-up to print dialog box using JavaScript?

0 0 1 minute read

Given an HTML document and the task is to design a button that would pop-up a print dialog box. We are going to use JavaScript to do the assigned task:

Approach::

Add a button which links to a JavaScript Function.
Inside the JavaScript Function, use the JavaScript default function to call the print dialog box

Syntax:

window.print

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>create a pop-up to print  
      dialog box using JavaScript</title> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green">zambiatek</h1> 
        <script> 
            function printPopUp() { 
                alert("Pop-up dialog-box") 
                window.print(); 
            } 
        </script> 
  
        <button onclick="printPopUp()">Print</button> 
    </center> 
</body> 
  
</html> 

Output:
Before:

After:

Approach::

Use DOM onload Event in body tag.
Use window alert method for pop-up dialog-box and window.print to print the document.

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>create a pop-up to print 
      dialog box using JavaScript</title> 
</head> 
  
<body onload="alert('Pop-up dialog-box');window.print();"> 
    <center> 
        <h1 style="color:green"> 
          zambiatek 
      </h1>  
      create a pop-up to print dialog box using JavaScript 
  </center> 
</body> 
  
</html> 

Output:

Approach::

Use <a> href attribute to hyperlink text.
Use window alert method for pop-up dialog-box and window.print to print the document.

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>create a pop-up to print  
      dialog box using JavaScript</title> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green"> 
          zambiatek 
      </h1> 
        <a href="javascript:alert('Pop-up dialog-box');window.print();"> 
          Click Me 
      </a> 
  </center> 
</body> 
  
</html> 

Output:
Before:

After:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!