JavaScript Window Print Page Button

  2. HowTo
  3. JavaScript Howtos
  4. JavaScript Window Print Page Button
Muhammad Muzammil Hussain Jan 30, 2023
JavaScript
  1. the window.print() Function and Usage Example in HTML
  2. Examine the Given HTML Code in Few Steps
  3. How to Print Browser Page
  4. Alternative Way to Get Same Results
JavaScript Window Print Page Button

JavaScript window.print()is a simple and easy way to print the content of a web page. It opens a print dialog box that lets you select multiple printing options. This method doesn’t require any parameters nor returns anything.

the window.print() Function and Usage Example in HTML

The given JavaScript statements display a button of Print me, and then it displays the property of that website page in a sheet in which we seek to print it. The function window.print() of JavaScript for opening up printing options dialog is used here to execute the print functionality.

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML | Window Print() method example
    </title>
 
    <script type="text/javascript">
    </script>
 
</head>
 
<body>
 
    <h2>Hi Users Click "Print me" to open print dialog</h2>
    <form>
        <input type="button" value="Print me"
               onclick="window.print()" />
    </form>
 
</body>
<html>

In this HTML page source, we have created a form input type of button to call any function on click.

You can see the window.print() method triggered by the button on click event. It will pop up the print dialog box to print content and images of the web page.

Users can set destination, pages, layout, colors, and more settings on the print box.

Examine the Given HTML Code in Few Steps

Follow these four easy steps and get a clear understanding of the window.onload method.

  • Create a text document using notepad or any other text editing tool.
  • Paste the given code in the created text file.
  • Save that text file with the extension of .html and open it with any default browser.
  • You can see a Print me button. It will call the window.print() function, which will pop up the print dialog box.

How to Print Browser Page

If your default browser doesn’t support the above functionality, follow these quick steps to access print options.

  • Click on your browser’s options » print » click ok.
  • You can also press short keys Ctrl+P Buttons to access print options.

Alternative Way to Get Same Results

You can also access the print dialog options by using another function:

document.execCommand('print');

Just use document.execCommand('print'); instead of using window.print() function. It will work same as window.print() method.