How to print a web page using JavaScript
HTML JavaScript How To

How to print a web page using JavaScript

Editorial Team
Editorial Team

Follow us on Discord or Telegram to get access to free tutorials and updates.

Sometimes we would like to print some important content on the web page via a printer. We can use the print() function of window object to print a web page.

window.print() function

The window.print() function prints the contents of the web page. This example shows how to use window.print() function in the click event of a button.

Example 1 – Printing a simple page

<!DOCTYPE html>
<html>
<head>
   <title>JS print function</title>
</head>
<body>
    <p>Hello World</p>
    <button onclick="window.print()">Print</button>
</body>
</html>

Output

Hello World

Example 2 – Printing in a different page size

To print the page in a specific page size you can follow this method.

HTML markup

<div>
    <div class="page">
        <div class="page-inner">
            <p>This is a page with the size of an A4 page</p>
            <button id="mybutton" onclick="window.print()">Print</button>
        </div>   
    </div>
</div>

Add CSS

body {
    margin: 0;
    padding: 0;
}
* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.page {
    width: 21cm;
    min-height: 29.7cm;
    padding: 2cm;
    margin: 1cm auto;
    border: none;
    background: #F4F3F1;
}
.page-inner{
    padding: 1cm;
    border: 2px solid black;
    height: 256mm;
    outline: 2cm #F4F3F1 solid;
}

@page {
    size: A4;
    margin: 0;
}
@media print {
    .page {
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;
    }
}
#mybutton{
background-color:dodgerblue;
border:none;
padding:10px;
color:white;
}

Run the code

See the Pen Printing a web page using JavaScript by Mishel Shaji (@mishelshaji) on CodePen.