从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?

我也尝试过打印样式表。

I tried print stylesheet also.

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

请帮助。感谢。

推荐答案

。 。在Chrome中，可以使用

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

@page { margin: 0; }

。 。由于内容将扩展到页面的限制，因此页面打印页眉/页脚将不存在。你应该，当然，在这种情况下，在你的body元素中设置一些边距/ paddings，使内容不会一直延伸到页面的边缘。由于普通打印机只是无法获得无边距打印，它可能不是你想要的，你应该使用这样的：

. . 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; }
}

。 。可悲的是，它目前只适用于Chrome。对于其他浏览器，您需要即时创建PDF并打印（您可以在其上创建自动打印PDF嵌入JavaScript）。最终，对@page指令的支持将提高，您将能够在所有浏览器中使用纯CSS解决方案。希望迟早。

. . Sadly it currently works only on Chrome. For other browsers you will need to create a PDF on the fly and print that (you can create a self-printing PDF embedding JavaScript on it). Eventually the support for "@page" directive will improve and you will be able to use the pure CSS solution in all browsers. Hopefully sooner than later.

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