从 window.print() 中删除页眉和页脚 [英] Remove header and footer from window.print()

问题描述

我使用 window.print() 打印页面，但我得到的页眉和页脚包含页面标题、文件路径、页码和日期.如何删除它们?

I am using window.print() for printing page, but I got header and footer contains page title, file path, page number and date. How to remove them?

我也试过打印样式表.

#header, #nav, .noprint
{
display: none;
}

请帮忙.谢谢.

推荐答案

在 Chrome 中，可以使用

In Chrome it's possible to hide this automatic header/footer using

@page { margin: 0; }

由于内容会扩展到页面的限制，页面打印页眉/页脚将不存在.当然，在这种情况下，您应该在 body 元素中设置一些边距/填充，以便内容不会一直延伸到页面的边缘.由于普通打印机无法进行无边距打印，而且这可能不是您想要的，因此您应该使用以下内容:

Since the contents will extend to page's limits, the page printing header/footer will be absent. You should, of course, in this case, set some margins/paddings in your body element so that the content won't extend all the way to the page's edge. Since common printers just can't get no-margins printing and it's probably not what you want, you should use something like this:

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

正如 Martin 在评论中指出的那样，如果页面有一个滚动超过一页的长元素(像一张大桌子)，边距被忽略，打印出来的版本会看起来很奇怪.

As Martin pointed out in a comment, if the page have a long element that scrolls past one page (like a big table), the margin is ignored and the printed version will look weird.

在这个答案的原始时间(2013 年 5 月)，它只适用于 Chrome，现在不确定，不需要再试一次.如果您需要支持无法运行的浏览器，您可以即时创建一个 PDF 并打印(您可以创建一个自打印的 PDF 嵌入 JavaScript)，但这是一个巨大的麻烦.

At the time original of this answer (May 2013), it only worked on Chrome, not sure about it now, never needed to try again. If you need support for a browser that can't hable, you can create a PDF on the fly and print that (you can create a self-printing PDF embedding JavaScript on it), but that's a huge hassle.

这篇关于从 window.print() 中删除页眉和页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！