← Back

Hide browsers's default metadata when printing a webpage

There might come a time when you wanna print a webpage using Javascript. This is a simple task and could be done using window.print(), but there is a slight issue that you may not encounter at once.

Browsers by default, put the webpage’s title and the date of the day, on top of your webpage inside the printed sheet. For instance, if you print Google.com homepage, following printed sheet will be the result:

https://image.ibb.co/f9htxF/Screen_Shot_2017_08_06_at_2_01_28_AM.png

Hiding the default values

In order to hide those title and date values, put the CSS snippet below inside your stylesheet and watch the magic:

@media print {
  @page {
    size: auto;
    margin: 0mm;
  }
}

@media print will load any style inside of it, only when the webpage is being printed.

To find more details about @page rule, visit More about @page on MDN.

Have Fun ;)

← Manage and Promisify async actions in javascript Handling loadings in React using Higher Order Components →
More about me