打印网页时需设置自定义的页眉页脚，CSS没法直接设定；但可以利用table的特性，间接实现类似的效果：
实现效果
网页结构代码
/* @media print 限定样式，只作用于打印页 */
/* @media print { */
@page {
/* 设置每页顶部、底部间距 { */
margin: 20px inherit;
}
.page-wrap {
width: 100%;
text-align: center;
}
.page-wrap thead th,
.page-wrap tfoot td {
height: 40px;
line-height: 40px;
font-size: 16pt;
color: red;
border-bottom: 1px solid #ddd;
}
.page-wrap tfoot td {
color: blue;
border-top: 1px solid #ddd;
border-bottom-width: 0;
}
/* } */
页眉内容
可将thead>th作为一个顶部的div使用，随意按需求填放模块内容
页脚内容
可将tfoot>td作为一个顶部的div使用，随意按需求填放模块内容
document.addEventListener('DOMContentLoaded', function(event) {
let table = document.getElementById('content'),
htm = '页面内容……将tbody>td作为页面内容区，按需填放内容';
for(let i = 0; i < 100; i++) {
htm += '
页面内容'+(i+1)+'';
}
table.innerHTML = htm;
})
