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

12 Sep, 2019
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 boxSyntax:window.printExample:<!DOCTYPE html><html>  <head>    <title>create a pop-up to print       dialog box using JavaScript</title></head>  <body>    <center>        <h1 style="color:green">GeeksforGeeks</h1>        <script>            function printPopUp() {                alert("Pop-up dialog-box")                window.print();            }        </script>          <button onclick="printPopUp()">Print</button>    </center></body>  </html>Output:Before:After:
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">GeeksforGeeks</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">          GeeksforGeeks      </h1>       create a pop-up to print dialog box using JavaScript  </center></body>  </html>Output:
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">          GeeksforGeeks      </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">          GeeksforGeeks      </h1>        <a href="javascript:alert('Pop-up dialog-box');window.print();">          Click Me      </a>  </center></body>  </html>Output:Before:After:
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">          GeeksforGeeks      </h1>        <a href="javascript:alert('Pop-up dialog-box');window.print();">          Click Me      </a>  </center></body>  </html>
Output:Before:
After:
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Roadmap to Learn JavaScript For Beginners
Difference Between PUT and PATCH Request
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?