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

2024-07-12 09:15| 来源: 网络整理| 查看: 265

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

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

有的意见是前端分页计算，然后在一定位置强制加一个p标签进行分页，在要打印强行分页的地方加上:

，这种的话确实不好计算，万一某一行的内容被撑起来了，一页的高度也不确定了，这种方案不可行。然后就是我自己找到的一个css属性。如下： page-break-inside 属性用于设置是否在指定元素中插入分页符。注意：您不能对绝对定位的元素使用此属性。注意：请尽可能少地使用分页属性，并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。 auto：默认。如果必要则在元素内部插入分页符。 avoid：避免在元素内部插入分页符。 inherit：规定应该从父元素继承 page-break-inside 属性的设置。

然后我在指定的tr元素加入了分页符，确实也达到了预期想要的效果，table打印被截断的问题就算是解决了。

tr { page-break-inside: avoid; }

后来客户又提了一个需求，第二页能不能也有表头信息，因为只有第一页有表头信息，从后面开始就不清楚看的哪一列信息了。我一直以为table里面的thead是没有什么用的，只是一个标签语义化的意思，但是在需要用到打印table的时候，使用起来很方便。

班级姓名性别年龄内容

总结：加入thead标签之后，table截取的问题也会解决了，还是要看项目中的实际需求，如果客户不需要分页表头，就使用page-break-inside，美化打印样式使用。

拓展：在这次项目中，我是直接手写table，没有使用el-table、a-table，虽然两者里面都有包裹thead标签，但是el-table为了实现表头浮动，他把表头信息与内容信息是分为两个div来写的，el-table在打印的时候不能让每一页都含有表头，就需要在适当的时候操作dom节点了，在内容的div里面添加表头信息。

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) }) } } /* 隐藏咱们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; } }

以上是vue2的写法，vue3使用ref属性，然后在setup里声明变量接着就行了，不用$ref。

【本文地址】

公司简介

联系我们