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:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:
    Before:

    After:



My Personal Notes arrow_drop_up

Developer

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.