请问打印网页的页眉页脚信息如何设置？

Question

请问打印网页的页眉页脚信息如何设置？

Answer 1

各个浏览器的设置不一，比如火狐和 IE 就可以在打印中设置页面页脚要显示的网页元数据或自定义信息，谷歌只有取消页眉页脚的设置。

IE:

火狐：

谷歌：

目前还没有通过代码设置页眉页脚的官方规范（如果有误请大牛指正）。

针对浏览器打印设置的不同可以统一以取消页眉页脚的形式打印，然后在页面头尾添加元素模拟页眉页脚。

<div class="beforeHeader">页眉</div>

<!-- 网页内容 -->

<div class="afterFooter">页脚</div>

可以使用媒体查询设置页眉页脚的出现时机和样式。

.beforeHeader, 
.afterFooter {
    display: none;
}

@media print {
    /* 打印时显示 */
    .beforeHeader, 
    .afterFooter {
        display: block;
    }
}