Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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
Previous
Next
Share your thoughts in the comments
Similar Reads