How to Eliminate Unwanted Headers and Footers When Using `window.print()`?

How to Suppress Headers and Footers in window.print()

When invoking window.print() to print a webpage, unwanted headers and footers may appear, displaying the page title, file path, page number, and date. This guide demonstrates how to eliminate these additional elements.

Solution:

In Chrome, utilize the CSS rule @page to conceal the automatic header and footer:

@page {
  margin: 0;
}

As the content expands to the page's boundary, the printing header and footer become redundant. However, ensure you specify margins or paddings on the body element to prevent content expansion beyond the page edge. Printers typically do not support marginless printing, so consider the following:

@media print {
  @page {
    margin: 0;
  }
  body {
    margin: 1.6cm;
  }
}

However, if content spans multiple pages, the print layout may appear distorted due to uneven margins. The first page will have a 1.6cm top margin, while the last page will have a 1.6cm bottom margin, leaving middle pages with no margins.

Although this solution was effective in Chrome at the time of writing (May 2013), compatibility across other browsers has fluctuated. If support for other browsers is necessary, consider generating a PDF dynamically and printing that instead.

The above is the detailed content of How to Eliminate Unwanted Headers and Footers When Using `window.print()`?. For more information, please follow other related articles on the PHP Chinese website!