一、print.js的引入和基本使用
https://www.jianshu.com/p/37b20fd9918b
二、如何实现分页行不被截断且每一页都有表头
满足以下前提
- 使用原生的table标签
- 媒体查询print类型
不了解媒体查询参考链接 https://www.jianshu.com/p/0374d7005915
打印预览效果如下（行不截断，下一页有表头）
image.png
2.1、html部分
这里使用原生table标签
thead是分页自动加表头的关键，，一定要写
我一直以为table里面的thead是没有什么用的，只是一个标签语义化的意思，但是在需要用到打印table的时候，使用起来很方便，可以为下一页自动加表头的关键。
<template>
<!-- ref绑定打印dom节点名称 -->
<div ref="printArea" class="printAsset">
<table class="assetPrintTable">
<!-- 重点--一定要写thead -->
<thead>
<tr>
<th>资产编号</th>
<th>资产名称</th>
<th>Epc</th>
<th>规格型号</th>
<th>使用期限</th>
<th>存放区域</th>
<th>资产原值</th>
<th>登记时间</th>
<th>是否已发卡</th>
</tr>
</thead>
<tbody>
<tr v-for="item in dataList" :key="item.id">
<td>{{ item.number }}</td>
<td>{{ item.name }}</td>
<td>{{ item.epc }}</td>
<td>{{ item.specifications }}</td>
<td>{{ item.usedMonth }}</td>
<td>{{ item.fullName }}</td>
<td>{{ item.price }}</td>
<td>{{ item.registerTime }}</td>
<td>
<span v-if="item.epcBind == '0'">未发卡</span>
<span v-else-if="item.epcBind == '1'">已发卡</span>
</td>
</tr>
</tbody>
</table>
</div>
</template>
2.2、js部分
子组件methods
//print方法是在父组件触发的
print() {
this.$nextTick(() => {
// 延迟到下次dom更新执行
this.$print(this.$refs["printArea"], {
noPrint: ".noPrint",
type: "html",
onStart: () => {
console.log("打印开始");
},
onEnd: () => {
console.log("打印完成");
},
});
});
},
父组件html
<!-- PrintAsset就是引入的子组件-->
<PrintAsset
:dataList="dataListPrint"
ref="printAsset"
v-show="showPrintAsset"
/>
父组件js（部分）
// 执行打印方法
this.$refs["printAsset"].print();
2.3、子组件的css
-
@media print只在打印和打印预览的时候生效 - 实现分页，一行不被截断的关键
tr {
page-break-inside: avoid;
}
看一下这个css属性的介绍
page-break-inside 属性用于设置是否在指定元素中插入分页符。
注意： 您不能对绝对定位的元素使用此属性。
注意： 请尽可能少地使用分页属性，并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。
auto：默认。如果必要则在元素内部插入分页符。
avoid：避免在元素内部插入分页符。
inherit：规定应该从父元素继承 page-break-inside 属性的设置。
<style lang="scss">
// 媒体查询print，只在打印和打印预览的时候生效
@media print {
.printAsset {
width: 100%;
// 表格基本样式
.assetPrintTable {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
border-left: 1px solid #e4e7ed;
border-top: 1px solid #e4e7ed;
// 实现分页，行不撕裂的关键
tr {
page-break-inside: avoid;
}
// 单元格样式
td,
th {
border-right: 1px solid #e4e7ed;
border-bottom: 1px solid #e4e7ed;
padding: 10px;
text-align: center;
}
//表头添加背景色
th {
background-color: #f5f7fa;
}
}
}
}
</style>
三、总结
加入thead标签之后，分页之后会自动加表头，还是要看项目中的实际需求，如果客户不需要分页表头，就使用page-break-inside，防止行被截断即可。
四、扩展
在这次项目中，我是直接手写table，没有使用el-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>
