经常写文章的都知道必须要写前言：前端展示数据时再不过的需求了，但很多时候，都需要把数据打印出来，这时候产品肯定要你弄个漂亮的排版。这里要分两种情况：一是一次打印时只有一种排版（一种页眉、页脚、背景）；二是一次打印多个排版，下面我就分别说下怎么处理。
单排版报告打印
单排版是适配性最好的，尽量让设计按这个走，可以免去很多麻烦。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
box-sizing: border-box;
color: white;
}
body {
margin: 0;
}
.page-break-inside {
page-break-inside: avoid;
}
.bg1 {
background: red;
}
.bg2 {
background: blue;
}
.bg3 {
background: yellow;
}
.bg4 {
background: grey;
}
.header {}
.header-content {
height: 50px;
position: relative;
}
.header-content-txt {
height: 50px;
width: 100%;
background: goldenrod;
}
.footer {}
.footer-content {
height: 50px;
position: relative;
}
.footer-content-txt {
height: 50px;
width: 100%;
background: goldenrod;
}
@media print {
@page {
size: A4;
margin: 5mm;
}
.header-content-txt {
position: fixed;
top: 0;
left: 0;
}
.footer-content-txt {
position: fixed;
bottom: 0;
left: 0;
}
}
</style>
<body class="bg3">
<table class="bg1">
<thead class="header">
<tr>
<th>
<div class="header-content">
<div class="header-content-txt">
theader1
</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
</div>
</td>
</tr>
</tbody>
<tfoot class="footer">
<tr>
<th>
<div class="footer-content">
<div class="footer-content-txt">
footer1
</div>
</div>
</th>
</tr>
</tfoot>
</table>
</body>
</html>
看下打印预览
记得把背景图形勾上，要不然背景颜色出不来。然后我讲下关键点：
@media print，媒体查询，当打印时才生效@page打印页面的一些配置，比如margin: 5mm;等同于打印时设置边距为自定义，然后拉出5mm边距，这里你可以设置多一点，可以露出浏览器打印自带的页眉页脚。好处就是有页码，因为我们利用theader和tfooter自己弄的页眉页脚没法有页码（不要相信网上的用counter(page)，没用的）。设置为0，白边就没了。- 自定义页眉页脚时使用
position: fixed;，如header-content-txt样式，这样就能每页固定在上下位置了。 - 如果内容要设置颜色，可以设置在body上，你可以看到，打印时body其实是撑满纸张的，如果设置在tbody里的内容上，就如红色的那样无法撑满纸张（最好让设计不要带背景色，也不环保）。
- 基于第4点，你肯定想既然body是撑满的，那我table设置
min-height: 100%;红色不就可以撑满了嘛，别想了，没用。 - 一般页眉和内容会设置一定的间距，不要设置在tbody的内容加个padding，这样只有第一页是有间距的，后面的页是没有间距的。请设置在页眉上（页脚同理），比如
.header-content {
height: 50px;
position: relative;
margin-bottom: 20px;//你加的间距
}
多排版报告打印
这时你肯定会想，多排版不就是再多加个table吗。像这样
<body class="bg3">
<table class="bg1">
<thead class="header">
<tr>
<th>
<div class="header-content">
<div class="header-content-txt">
theader1
</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
</div>
</td>
</tr>
</tbody>
<tfoot class="footer">
<tr>
<th>
<div class="footer-content">
<div class="footer-content-txt">
footer1
</div>
</div>
</th>
</tr>
</tfoot>
</table>
<table class="bg2">
<thead class="header">
<tr>
<th>
<div class="header-content">
<div class="header-content-txt">
theader2
</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
<div>发发发十sfds</div>
</div>
</td>
</tr>
</tbody>
<tfoot class="footer">
<tr>
<th>
<div class="footer-content">
<div class="footer-content-txt">
footer2
</div>
</div>
</th>
</tr>
</tfoot>
</table>
</body>
我们看下效果
是不是感觉哪里好像不太对。是的，每页的页眉页脚都是 theader2；两个table也连在一起了。
那让我们改造下，比如这样：
- 我们去掉了
position: fixed;，因为fixed是固定在页面的上面，所以table2的覆盖掉了table1的thead - 我们使用
page-break-inside: avoid;告诉浏览器，table是一个整体，尽量不要拆散。page-break-before,page-break-after也是类似的效果。
看下效果
我们看到，因为多个排版，页眉页脚不能固定在上下位置，所以每个排版最后一页的页脚不能在最下面，背景色也是撑不满的。最好的解决办法就是解决你的产品经理，不要一次性打印多个排版的报告。
