html打印自定义页头,CSS实现打印网页自定义页眉页脚

打印网页时需设置自定义的页眉页脚，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;

})