How Can I Eliminate Headers and Footers When Printing Documents Using window.print()?

Eliminate Header and Footer in Printed Documents with window.print()

The default behavior of the window.print() function includes printing a header and footer that displays page-related information like title, path, number, and date. Removing these elements can enhance the printing aesthetics.

While attempting to suppress the header and footer with a print stylesheet, you encountered difficulties. An effective solution to resolve this issue exists.

In Google Chrome, you can disable the automatic header/footer by incorporating the following code into your CSS:

@page { margin: 0; }

By setting the margins to zero, the printed content seamlessly extends to the page's limits, eliminating the need for a header or footer. To prevent the content from reaching the page's edge, specify appropriate margins and paddings in your body element:

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

Caution: When dealing with multipart content that necessitates multiple pages, this approach may result in aesthetic deficiencies. Only the first and last pages will have the intended margins, while intermediate pages will lack both top and bottom margins.

This solution, while effective in Chrome at the time of this answer (May 2013), may necessitate further testing for compatibility with other browsers. If cross-browser support is essential, generating a PDF on the fly and printing it (potentially with embedded self-printing JavaScript) remains a feasible but labor-intensive alternative.

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