极客教程CSS 打印页眉和页脚
在网页中，我们有时需要打印页面内容，例如打印报告、文档等。而在打印时，经常需要在每一页的页眉和页脚位置添加一些额外的信息，如公司名称、页码等。在 CSS 中，我们可以使用 @media 查询和 @page 规则来实现打印页眉和页脚。
@media 查询
CSS 中的 @media 查询可以用来指定不同的样式规则在不同的媒体类型下生效。例如，在屏幕上显示的页面样式和在打印时的页面样式可以不同。我们可以使用 print 媒体类型来指定打印时的样式规则。
@media print {
/* 在这里编写打印时的样式规则 */
}
@page 规则
CSS 中的 @page 规则可以用来设置打印页面的样式，包括页眉和页脚。在 @page 规则中，我们可以使用 @top-center、@top-left、@top-right、@bottom-center、@bottom-left、@bottom-right 等伪类选择器来选择页眉和页脚位置，并设置相应的样式。
@page {
@top-center {
/* 在这里编写页眉样式 */
}
@bottom-center {
/* 在这里编写页脚样式 */
}
}
设置页眉和页脚
下面是一个示例，展示了如何使用 @media 查询和 @page 规则来设置打印页面的页眉和页脚。
<!DOCTYPE html>
<html>
<head>
<title>打印页眉和页脚</title>
<style>
@media print {
@page {
size: A4;
margin: 2cm;
}
@top-center {
content: "公司名称";
font-size: 18px;
}
@bottom-center {
content: "第" counter(page) "页，总共" counter(pages) "页";
font-size: 14px;
}
}
</style>
</head>
<body>
<h1>打印页眉和页脚示例</h1>
<p>这是一个用于演示如何使用 CSS 设置打印页眉和页脚的示例。</p>
<!-- 更多内容 -->
<script>
window.print();
</script>
</body>
</html>
在上面的示例中，我们使用了 @media print 查询来指定打印时的样式规则。然后，在 @page 规则中，我们使用 @top-center 伪类选择器来选择页眉的位置，并设置了页眉的内容为 “公司名称”，字体大小为 18px。类似地，我们使用 @bottom-center 伪类选择器来选择页脚的位置，并设置了页脚的内容为 “第 X 页，总共 Y 页”，其中使用了 counter(page) 和 counter(pages) 来生成页码信息，字体大小为 14px。
在 HTML 文件的 <body> 标签结束之前，我们使用了 JavaScript 的 window.print() 方法来触发打印操作。这样，当页面加载完成后，浏览器会自动弹出打印对话框，让用户选择打印机并设置打印选项。
运行结果
上面的示例中，当我们执行打印操作时，页面会打印出每一页的页眉和页脚信息。页眉中的 “公司名称” 会显示在每一页的中央位置，页脚中的页码信息会显示在每一页的底部中央位置。
为了更好地展示效果，下面是打印页面的一个示例截图：
-----------------------------
| |
| 公司名称 |
| |
-----------------------------
页面内容...
-----------------------------
第 1 页，总共 3 页
总结
通过使用 CSS 的 @media 查询和 @page 规则，我们可以在打印时自定义页面的页眉和页脚。这样，我们可以在打印报告、文档等时，方便地添加一些额外的信息，如公司名称、页码等。同时，我们还可以通过 JavaScript 的 window.print() 方法来触发打印操作，使打印过程更加便捷。使用这些技巧，我们可以更好地控制打印页面的样式，实现更好的打印效果。