当打印网页时，如何移除页面标题和日期（使用CSS）？

Question

当打印网页时，如何移除页面标题和日期（使用CSS）？

81

默认情况下，当你打印网页时，页面的标题和URL会打印在页面顶部，日期和时间会打印在底部。可以通过“页面设置”菜单（在Internet Exp中的“文件”下）来删除这些附加内容。是否有人知道通过CSS或JavaScript实现此操作的方法？

- swisstony

10个回答

58

很简单，只需要使用 CSS。

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

- Vigneswaran S

好答案 +1！查看文档以了解支持情况。https://developer.mozilla.org/en-US/docs/Web/CSS/@page - richardaum

24

解决页面标题的一个可能的方法:

提供一个打印按钮,
捕获点击事件,
使用Javascript更改页面标题,
然后同样通过Javascript执行打印命令。

document.title = "打印页面标题"; window.print();

这个方法在任何浏览器中都可行。

- Avatar

3

你还可以使用window.onbeforeprint和onafterprint来在打印事件发生前后对页面进行操作：https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint - Ragnar

8

除了来自@Md. Hasibul Huq的以下解决方案外，没有其他方法适用于我。您可以将其用于不带样式的body：

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

- Roman

8

您可以在样式表中添加以下内容：@page{size:auto; margin:5mm;} 但是这会将页面数量丢失。

- mtchuente

5

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

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

这样做一旦您打印页面，它就会返回其原始标题。

- Lucke

4

这不是一个编程解决方案（我绝对知道） 提问者寻求的是一个CSS答案，我知道这点，但是这个答案对他没有帮助，但它可以帮助其他人（比如我），这也是我来这里的原因。

但这确实可以救你的命，特别是当你的客户在周末找你修复它 :) (就像我遇到的情况)

她（你的客户）可以快速扩展“更多设置”，并从Chrome页面中取消选中“头部和尾部”，如下图所示，

再次强调，这个问题的编程解决方案就像被接受的答案一样，我不会重复它，但如果你不想在周末部署你的应用程序，那么这就是正确的方法。

- Hakan Fıstık

2

试试这个；

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

- Bugay Sarikaya

0

在通过window.print()打印时，在about:blank的位置添加自定义页面标题：添加以下行：

document.write('<head>' +
   '<title>' +
   'My Title' +
   '</title>'+ ...)

- Patricode

我认为您可能错过了问题的一部分，它明确要求关于CSS的内容，而且我认为已经有人发布了一个非常类似的答案。 - treckstar

1

它说或JavaScript - Patricode

你说得对，问题的结尾包括了JavaScript的条件。在审查过程中，当你的答案出现时，我读了问题的标题，然后发现你的答案没有使用CSS，这就促使我发表了评论。我是那个错过了问题中提到的“或者JavaScript”的部分的人。抱歉。 - treckstar

你说得对，问题的结尾包括了对JavaScript的条件要求。在审查过程中，当你的答案出现时，我读了问题的标题，然后发现你的答案没有使用CSS，这就促使我发表了评论。我是那个错过了问题中提到的“或者JavaScript”的部分的人。抱歉。 - undefined

-10

有一个功能可以为打印设置单独的样式表，使用

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

我不确定它是否符合你的要求。

- user181548

1

他要求更改打印页面的页眉和页脚，而不是正文。 - BalusC

我知道，但我不知道是否可以使用CSS来实现。 - user181548

4

这个回答表现出对问题的理解不佳。 - Cassandra

1

这是一个非常糟糕的回答，没有回答问题。 - naveedk

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- greim · Accepted Answer

从历史上看，由于它们是用户设置而不是您可以控制的页面的一部分，因此使这些内容消失曾经是不可能的。

然而，自2017年以来，@page at-rule已经被标准化，可以用于在现代浏览器中隐藏页面标题和日期:

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

打印页头/页脚和打印边距

在打印 Web 文档时，边距设置在浏览器的“页面设置”（或“打印设置”）对话框中。这些边距设置虽然在浏览器内部设置，但是由操作系统/打印机驱动程序控制，并且无法在 HTML/CSS/DOM 级别上进行控制。（有关使用 CSS 控制打印页眉页脚，请参阅打印页眉。）

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

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

感谢Vigneswaran S提供了这个提示。