很多时候，我们需要在浏览器打印网页时，自定义页眉和页脚内容。虽然window.print()本身无法直接控制打印页眉页脚，但我们可以利用CSS样式来实现类似效果。
首先，需要明确一点：浏览器打印功能主要由浏览器自身控制，JavaScript无法直接修改其默认打印设置。但是，我们可以通过CSS样式巧妙地影响打印输出。
CSS样式自定义页眉：
CSS的@page规则是关键。它允许我们定义页面的样式，包括页眉和页脚。
立即学习“前端免费学习笔记（深入）”；
国人原创小清新时光轴wordpress主题：zhuige 是一款小清新时光轴主题，以蓝灰色为主打色，整个界面大气简洁清晰，后台功能强大！非常适合个人博客，淘宝客等 wordpress时光轴主题： 1、主题简单易用，简单设置； 2、强大的后台管理中心； 3、主题支持响应布局，支持手机、ipad、浏览器各种分辨率（调整浏览器窗口的大小查看效果）； 4、自定义页眉和页脚的小工具； 5、可选的
105
以下示例展示如何使用CSS自定义页眉：
@page {
@top-left { content: "左上角页眉"; }
@top-center { content: "顶部中间页眉"; }
@top-right { content: "右上角页眉"; }
}将以上代码添加到你的CSS文件中。打印时，浏览器会根据这些规则在页面顶部相应位置显示自定义的页眉内容。 需要注意的是，这并非直接修改浏览器打印设置，而是通过控制打印样式来达到效果。 实际效果可能因浏览器而异。
总结：
虽然window.print()函数不提供直接修改页眉页脚的API，但通过CSS的@page规则，我们可以有效地控制打印输出的样式，从而实现自定义页眉页脚的效果，提升打印输出的专业性和可读性。 记住，不同浏览器对CSS打印样式的支持程度可能略有差异。
以上就是如何使用CSS自定义浏览器打印时的页眉和页脚？的详细内容，更多请关注php中文网其它相关文章！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
165
收藏
