前言：
上一个项目，主要是和客户直接沟通，然后客户有一些想法，因为是定制的OA系统，系统打印清单也比较多。然后总结了一些前端打印方面的小技巧。
上图是最开始打印出来的效果，明显看到分页之后，两张表之间有明显的瑕疵，以至于后来我客户跟我说像是被狗啃了似的。然后我查询了相关css的资料，对于打印分页的一些解决方案。
- 有的意见是前端分页计算，然后在一定位置强制加一个p标签进行分页，在要打印强行分页的地方加上:<P class=normal style="page-break-before: always"> </P>，这种的话确实不好计算，万一某一行的内容被撑起来了，一页的高度也不确定了。
- 然后就是我自己找到的一个css属性。如下：
page-break-inside 属性用于设置是否在指定元素中插入分页符。
注意： 您不能对绝对定位的元素使用此属性。
注意： 请尽可能少地使用分页属性，并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。
auto：默认。如果必要则在元素内部插入分页符。
avoid：避免在元素内部插入分页符。
inherit：规定应该从父元素继承 page-break-inside 属性的设置。
然后我在指定的tr元素加入了分页符，确实也达到了预期想要的效果，table打印被截断的问题就算是解决了。
tr {
page-break-inside: avoid;
}
后来客户又提了一个需求，第二页能不能也有表头信息，因为只有第一页有表头信息，从后面开始就不清楚看的哪一列信息了。我一直以为table里面的thead是没有什么用的，只是一个标签语义化的意思，但是在需要用到打印table的时候，使用起来很方便。
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>班级</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
内容
</tbody>
</table>
总结：加入thead标签之后，table截取的问题也会解决了，还是要看项目中的实际需求，如果客户不需要分页表头，就使用page-break-inside，美化打印样式使用。
拓展：在这次项目中，我是直接手写table，没有使用el-table、a-table，虽然两者里面都有包裹thead标签，但是el-table为了实现表头浮动，他把表头信息与内容信息是分为两个div来写的，el-table在打印的时候不能让每一页都含有表头，就需要在适当的时候操作dom节点了，在内容的div里面添加表头信息。
<el-table
:data="data"
ref="table"
>
</el-table>
<script>
export default {
mounted(){
this.$nextTick(() => {
//获取el-table的thead dom节点
let thead = this.$refs.table.$el.querySelector('.el-table__header-wrapper thead');
//追加到el-table的内容里去
this.$refs.table.$el.querySelector('.el-table__body-wrapper table').appendChild(thead)
})
}
}
</script>
<style>
/* 隐藏咱们dom操作添加的节点，不影响el-table原功能 */
.el-table .el-table__body-wrapper table thead{
display:none;
}
/* 在打印的时候隐藏el-table的表头，开放咱们dom操作添加的节点 */
@media print{
.el-table .el-table__header-wrapper{
display:none;
}
.el-table .el-table__body-wrapper table thead{
display:table-header-group;
}
}
</style>
以上是vue2的写法，vue3使用ref属性，然后在setup里声明变量接着就行了，不用$ref。
