How to create a pop-up to print dialog box using JavaScript?
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">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:
- 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:
Last Updated :
12 Sep, 2019
Like Article
Save Article