CSS 移除window.print()打印中的页眉和页脚
在本文中，我们将介绍如何使用CSS从window.print()函数的打印预览中移除页眉和页脚。
阅读更多：CSS 教程
什么是window.print()函数？
window.print()函数是JavaScript中的一个内置方法，用于在浏览器中打印当前页面或显示打印预览。当我们调用window.print()时，浏览器将显示一个打印预览窗口，其中包含将被打印的页面内容和设置选项。
如何移除打印预览中的页眉和页脚？
在打印预览中的页眉和页脚通常包含有关打印页面的信息，例如页面标题、页码等。但有时候我们可能希望移除它们，以让打印输出更加纯净。以下是一种常见的方法来移除打印预览中的页眉和页脚。
@media print {
@page {
size: auto;
margin: 0;
}
body {
margin: 0;
padding-top: 1rem; /* 防止内容被页眉遮挡 */
counter-reset: pageNum; /* 重置页码计数器 */
}
header,
footer {
display: none;
}
h1{
counter-increment: pageNum; /* 在每个带有h1标签的页面上增加页码 */
}
h1::before {
content: "Page " counter(pageNum);
}
}
让我们逐行解析上述代码段。
首先，我们使用@media print媒体查询，该媒体查询将只应用于打印模式。
然后，我们使用@page规则来设置打印页面的大小和边距。在这个例子中，我们将size设置为auto以使用页面的默认大小，而将margin设置为0以消除页面边距。
接下来，我们针对body元素设置了一些样式。我们将margin设置为0，以消除页面的默认边距。我们还添加了一个额外的padding-top来避免内容被页眉遮挡。
然后，我们使用display: none来隐藏header和footer元素。这将使打印预览中的页眉和页脚不可见。
接着，我们使用counter-reset属性来重置名为pageNum的页码计数器。
之后，我们使用counter-increment属性在每个带有h1标签的页面上增加页码，并使用h1::before伪元素来显示当前页码。
最后，我们添加了一个content属性来显示“Page”文本和页码。
示例
让我们通过一个简单的示例来演示如何使用上述CSS代码移除打印预览中的页眉和页脚。
<!DOCTYPE html>
<html>
<head>
<title>打印示例</title>
<style>
/* 在这里插入上述CSS代码 */
</style>
</head>
<body>
<header>
<h1>示例页面标题</h1>
</header>
<main>
<h1>第一页</h1>
<p>这是第一页的内容。</p>
<h1>第二页</h1>
<p>这是第二页的内容。</p>
</main>
<footer>
<p>页脚内容</p>
</footer>
</body>
</html>
在上述示例中，我们在
此处评论已关闭