打印网页时删除页面标题和日期（使用 CSS？）答案

【问题标题】：Removing page title and date when printing web page (with CSS?)打印网页时删除页面标题和日期（使用 CSS？）
【发布时间】：2010-04-04 04:56:07
【问题描述】：

默认情况下，打印网页时，页面title和URL会打印在页面顶部，date 和 time 打印在底部。

当您通过 PAGE SETUP 菜单（在 Internet Exp 中的 FILE 下）进行打印时，可以删除此附加项

有谁知道通过 CSS 或 javascript 执行此操作的方法吗？

【问题讨论】：

标签： javascript html css

【解决方案1】：

从历史上看，不可能让这些东西消失，因为它们是用户设置，不被视为您可以控制的页面的一部分。

不过，截至 2017 年，@page at-rule 已标准化，可用于在现代浏览器中隐藏页面标题和日期：

@page { size: auto;  margin: 0mm; }

Print headers/footers and print margins

打印 Web 文档时，边距在浏览器的页面设置（或打印设置）对话框中设置。这些边距设置虽然在浏览器中设置，但在操作系统/打印机驱动程序级别控制，在 HTML/CSS/DOM 级别无法控制。（对于 CSS 控制的打印页眉和页脚，请参阅打印页眉。）

设置必须足够大，以涵盖打印机的物理非打印区域。此外，它们必须足够大以包含浏览器通常配置为打印的页眉和页脚（通常是页面标题、页码、URL 和日期）。请注意，这些页眉和页脚虽然由浏览器指定并且通常可以通过用户首选项进行配置，但它们并不是网页本身的一部分，因此无法由 CSS 控制。在 CSS 术语中，它们不属于页面框 CSS2.1 第 13.2 节。

... 即设置边距为 0 会隐藏页面标题，因为标题打印在边距中。

感谢Vigneswaran S 获得此提示。

【讨论】：

这似乎是可能的...尝试在 Google Docs 中打印..（来自 Chrome）
它不是最好的解决方案，因为如果您不希望页边距顶部的第一部分（-top）将其推到顶部，它对页脚有好处，但我认为不适用于页眉
只需像使用“打印”按钮一样将“页面设置”按钮添加到您的网页，可以省去很多麻烦...
这是一个很好的答案。不需要使用 javascript 的“打印按钮”。如果您想摆脱顶部的标题，但遇到以下页面没有所需间距的问题，请尝试使用 @page :first 代替

【解决方案2】：

很简单。只需使用 css。

<style>
@page { size: auto;  margin: 0mm; }
</style>

【讨论】：

不错的答案+1！查看文档以了解支持。 developer.mozilla.org/en-US/docs/Web/CSS/@page

【解决方案3】：

页面标题的可能解决方法：

提供打印按钮，
捕捉onclick事件，
使用javascript更改页面标题，
然后也通过javascript执行打印命令。

document.title = "Print page title"; window.print();

这应该适用于所有浏览器。

【讨论】：

这是一个很好的答案
您还可以使用 window.onbeforeprint 和 onafterprint 在打印事件发生之前和之后对页面进行处理：developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/…

【解决方案4】：

您可以在样式表中添加：@page{size:auto; margin:5mm;} 但这也丢弃了页码

【讨论】：

【解决方案5】：

完成 Kai Noack 的回答，我会这样做：

var originalTitle = document.title;
document.title = "Print page title";
window.print();
document.title = originalTitle;

这样，一旦您打印页面，这将返回到其原始标题。

【讨论】：

【解决方案6】：

除了@Md. Hasibul Huq 的以下解决方案外，没有什么对我有用。 body 可以不带样式使用：

@media print {
  @page {
    margin-top: 0;
    margin-bottom: 0;
  }
  body  {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

【讨论】：

【解决方案7】：

试试这个；

@media print{ 
  @page {
    margin-top: 30px;
    margin-bottom: 30px;
  }
}

【讨论】：

【解决方案8】：

这不是编程解决方案（我绝对知道）
问这个问题的人是在用 CSS 寻求答案，我知道这一点，这个答案对他根本没有帮助，但它可以帮助其他人（比如我），这首先把我带到了这里。

但它可以挽救您的生命，尤其是如果您的客户在周末打电话给您修复它:)
（就像发生在我身上的事情一样）

她（您的客户）可以快速展开“更多设置”并取消选中 Chrome 页面中的“页眉和页脚”，如下图所示，

同样，该问题的编程解决方案与已接受的答案一样，我不会重复，但如果您不想在周末部署应用程序，那么这就是要走的路

【讨论】：

【解决方案9】：

有一个单独的样式表用于打印，使用

 <link type="text/css" rel="stylesheet" media="print" href="print.css">

我不知道它是否符合您的要求。

【讨论】：

他要求更改打印页的页眉和页脚，而不是正文。
我知道，但我不知道是否可以使用 CSS 来做到这一点。
此回复显示对问题的理解不佳。
这是一个非常糟糕的回答，没有回答问题。