css - 从 window.print() 中删除页眉和页脚

Question

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

我也试过打印样式表。

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

请帮忙。谢谢。

Answer 1

在 Chrome 中，可以使用

隐藏此自动页眉/页脚

@page { margin: 0; }

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

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

作为Martin有评论指出，如果内容太大，需要好几页，打印版就不太好看了:只有第一页有1.6cm的上边距，只有最后一页有1.6cm的下边距。中间的页面不会有顶部或底部边距。

在这个答案的原始时间(2013 年 5 月)，它只在 Chrome 上工作(编辑:2022 年 10 月在 FF 上工作)，现在不确定，永远不需要再试一次。如果您需要对无法支持的浏览器的支持，您可以即时创建一个 PDF 并打印它(您可以创建一个在其上嵌入 JavaScript 的自打印 PDF)，但这是一个巨大的麻烦。