How to print a web page using JavaScript

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;
}