前端table打印被截断，如何给每一页都增加表头

表头"/>

前端table打印被截断，如何给每一页都增加表头

前言：

        上一个项目，主要是和客户直接沟通，然后客户有一些想法，因为是定制的OA系统，系统打印清单也比较多。然后总结了一些前端打印方面的小技巧。

        上图是最开始打印出来的效果，明显看到分页之后，两张表之间有明显的瑕疵，以至于后来我客户跟我说像是被狗啃了似的。然后我查询了相关css的资料，对于打印分页的一些解决方案。

1. 有的意见是前端分页计算，然后在一定位置强制加一个p标签进行分页，在要打印强行分页的地方加上:<P class=normal style="page-break-before: always"> </P>，这种的话确实不好计算，万一某一行的内容被撑起来了，一页的高度也不确定了，这种方案不可行。
2. 然后就是我自己找到的一个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。