How Can I Remove Headers and Footers from `window.print()` Output in Chrome?

Excluding Header and Footer from window.print() Operations

Encountering headers and footers containing page title, file path, page number, and date while utilizing window.print() for printing can be frustrating. Attempting to resolve this issue through print stylesheets may prove futile, necessitating alternative solutions.

In Chrome, it is possible to suppress these automated elements by employing:

@page { margin: 0; }

This allows the content to expand to the edges of the page, eliminating the default header and footer. However, it is crucial to establish appropriate margins and paddings in the body element to prevent content from extending beyond the page margins.

Another approach is:

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

While this approach provides margins, it faces a limitation: if the content spans multiple pages, the margins may be inconsistent. The first page retains the 1.6cm top margin, while the last page retains the 1.6cm bottom margin, leaving the intermediate pages with no margins.

Alternatively, consider creating a PDF on the fly and printing it directly. However, this approach introduces additional complexity.

The above is the detailed content of How Can I Remove Headers and Footers from `window.print()` Output in Chrome?. For more information, please follow other related articles on the PHP Chinese website!