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

前言：

上一个项目，主要是和客户直接沟通，然后客户有一些想法，因为是定制的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。

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

excel表格打印每页都有表头_【Excel】打印超长表格，怎么才能每页都显示表头？...
打印长表格时,是不是遇到过只有第一页有表头,后面几页都没有表头的情况? 怎么解决? 换页处插入一行把表头复制过来? 可以,但是,有更有效率的办法! 来吧!学起来!! 方法:点页面布局--打印标题--打 ...
html打印表格每页都有的表头和打印分页
本文转载:http://www.cnblogs.com/RitchieChen/archive/2008/07/30/1256829.html 在做项目的时候碰到的.用户要求,页面呈现太长时,打印的时 ...
ReportViewer单据票据打印，自动分页，每页显示固定行数，每页都显示表头
报表工具用来用去,其实还是微软自带的ReportViewer比较轻量好用,一般需求完全够用.只是由于不常用,总会有解决一个问题过段时间又忘了怎么解决的问题.索性整理一下,当作笔记了. 在票据打印的时候 ...
excel表格打印每页都有表头_掌握这8个Excel技巧，搞定表格表头难题你比同事更轻松...
[温馨提示]亲爱的朋友,阅读之前请您点击[关注],您的支持将是我最大的动力! 我们用Excle制作表格时,一般都会制作一个表头增强阅读性,合适的表头能够让我们的表格更美观.逻辑更清晰,但对于很多小伙伴 ...
excel表格打印每页都有表头_Excel打印时每页都有表头标题是怎样设置的？
点击箭头处"蓝色字",关注我们哦!! 在我们日常用Excel办公时,会制作许多超长的表格,这些表格可能会打印许多张纸,但是表头只有一个.(例如:制作一份成绩册或一份全市公务员工资发 ...
excel如何删除空白行_WPS表格技巧—长表格打印时如何让每页都有表头
我们在利用WPS表格和Excel表格进行办公的时候,经常会遇到长表格,打印时需要好几页纸,但是表头却只在第一页才有,导致我们在看数据时很不方便.那么对于长表格,我们要进行怎样的设置才能使打印的每一页都 ...
excel表格打印每页都有表头_「Excel教程」10个处理Excel表头的小技巧，让你的表格更高级...
打开表格的第一眼看到的便是表头,它就如同人的容貌,打扮的精致会给人留下深刻的印象,表头做的精致一是方便工作,二是给人耳目一新的效果.那么,怎样操作? 一.如何批量插入表头? 工作中领导要的不仅仅是准确 ...
Excel设置excel打印每页都有表头标题
Excel设置excel打印每页都有表头标题转载于:https://www.cnblogs.com/baiyangyuanzi/p/7451495.html
excel表格打印每页都有表头_Excel如何打印每页都有表头?固定表头打印方法
点击上面蓝色文字关注我们,了解选购百科知识,快乐健康不停! 怎样打印表格每页都有表头? 点击"页面布局",选择"打印标题". 点击"工作表&quo ...

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

前言：

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

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

最新文章

热门文章