CSS实现打印网页自定义页眉页脚
2020-12-16 本文已影响0人
万能的小芳芳
打印网页时需设置自定义的页眉页脚，CSS没法直接设定；但可以利用table的特性，间接实现类似的效果：
实现效果
网页结构代码
<!DOCTYPE html>
<head>
<style>
/* @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;
}
/* } */
</style>
</head>
<body>
<table class="page-wrap" cellspacing="0" cellpadding="0">
<!-- style="display:table-header-group;" -->
<thead>
<tr>
<!-- 若是表格页，存在多列情况，记得按需求设置colspan合并头部和底部的列 -->
<th>
<h3>页眉内容</h3>
<span>可将thead>th作为一个顶部的div使用，随意按需求填放模块内容</span>
</th>
</tr>
</thead>
<tr>
<td id="content"></td>
</tr>
<!-- style="display:table-footer-group;" -->
<tfoot>
<tr>
<td>
<h3>页脚内容</h3>
<span>可将tfoot>td作为一个顶部的div使用，随意按需求填放模块内容</span>
</td>
</tr>
</tfoot>
</table>
<script>
document.addEventListener('DOMContentLoaded', function(event) {
let table = document.getElementById('content'),
htm = '页面内容……将tbody>td作为页面内容区，按需填放内容';
for(let i = 0; i < 100; i++) {
htm += '<div>页面内容'+(i+1)+'</div>';
}
table.innerHTML = htm;
})
</script>
</body>
</html>
利弊分析：
- 利：
- 可以自由设置内容样式，无太大限制（注意只用打印支持的CSS样式）；
- 将th/td当作div使用，不受table布局限制。
- 弊：
- 最后一页若内容较少，页脚会追在内容区后方，而不会处于页面最下端
