vue3-print-nb 表格打印分页，第一页有空白的情况出现解决方法（两种：一种原生，一种基于element表格）

第一种：基于element表格分页

<template><!-- element分组打印 --><div class="hello"><button v-print="printContent">打印</button><div id="printDiv"><p>工资统计表</p><p><span>单据日期：2024-08-04 00：00：00</span><span>年份：2024</span><span>月份：8月份</span><span>项目: 山东远大新能源科技有限公司</span></p><div v-for="(item, index) in tableData" :key="`${index}`"><el-table :data="item.tableData" stripe style="width: 100%"><el-table-column prop="code" label="序号" width="180" /><el-table-column prop="name" label="姓名" width="180" /><el-table-column prop="key1" label="日工考勤" /><el-table-column prop="key2" label="日工工资" /><el-table-column prop="key3" label="承包考勤" /><el-table-column prop="key4" label="承包工资" /><el-table-column prop="key5" label="回程路费" /><el-table-column prop="key6" label="应扣项" /><el-table-column prop="key7" label="借款" /><el-table-column prop="key8" label="质保金" /><el-table-column prop="key9" label="应得工资" /><el-table-column prop="key10" label="工人签字" /></el-table><div class="fy" v-if="index!==tableData.length-1"></div></div></div></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: String},data(){return{tableData:[],printContent:{id: 'printDiv',// preview: true, // 预览工具是否启用// previewTitle: '', // 预览页面的标题popTitle: '', // 打印页面的页眉}}},created(){for(let s=0;s<4;s++){const datas = {tableData:[]}for(let a=0;a<20;a++){const data = {code:(s * 20)+a + 1,name:"name" + (s * 20)+a + 1,key1:(s * 20)+a + 1,key2:(s * 20)+a + 1,key3:(s * 20)+a + 1,key4:(s * 20)+a + 1,key5:(s * 20)+a + 1,key6:(s * 20)+a + 1,key7:(s * 20)+a + 1,key8:(s * 20)+a + 1,key9:(s * 20)+a + 1,key10:(s * 20)+a + 1}datas.tableData.push(data)}this.tableData.push(datas)}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}.fy{page-break-before: always;
}
</style>

第二种基于原生表格分页

<template><!-- 原生表格打印 --><div class="hello"><button v-print="printContent" @click="printing">打印</button><div id="printDiv"><p style="text-align: center;">工资统计表</p><p><span>单据日期：2024-08-04 00：00：00</span><span>年份：2024</span><span>月份：8月份</span><span>项目: 山东远大新能源科技有限公司</span></p><table border="0" class="techniques" cellpadding="0" cellspacing="0" style="margin-top: 1px;width: 100%;border:solid 1px #f1f1f1"><thead><tr><td>序号</td><td>姓名</td><td>日工考勤</td><td>日工工资</td><td>承包考勤</td><td>承包工资</td><td>回程路费</td><td>应扣项</td><td>借款</td><td>质保金</td><td>应得工资</td><td>工人签字</td></tr></thead><tbody class="paging"><tr v-for="(item, index) in tableData" :key="`akl-${index}`"><td>{{item['code']}}</td><td>{{item['name']}}</td><td>{{item['key1']}}</td><td>{{item['key2']}}</td><td>{{item['key3']}}</td><td>{{item['key4']}}</td><td>{{item['key5']}}</td><td>{{item['key6']}}</td><td>{{item['key7']}}</td><td>{{item['key8']}}</td><td>{{item['key9']}}</td><td>{{item['key10']}}</td></tr></tbody></table>
</div></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: String},data(){return{tableData:[],printContent:{id: 'printDiv',// preview: true, // 预览工具是否启用// previewTitle: '', // 预览页面的标题popTitle: '', // 打印页面的页眉},PAGE_HEIGHT:1100}},created(){for(let s=0;s<100;s++){const data = {code:s+1,name:"name" + s+1,key1:s+1,key2:s+1,key3:s+1,key4:s+1,key5:s+1,key6:s+1,key7:s+1,key8:s+1,key9:s+1,key10:s+1}this.tableData.push(data)}},methods:{printing(){const splitDoms = document.getElementsByClassName('paging')let startY = 0 // 占用A4纸的高度，从每页第一个poetry div的top值开始累加for (let i = 0; i < splitDoms.length; i++) {const splitDom = splitDoms[i]const splitValue = splitDom.getBoundingClientRect()if (startY === 0) {startY = splitValue.top}const pageHeight = splitValue.bottom - startY// 当加上当前div的高度大于A4纸高度时，给前一个div加上分页标识if (pageHeight > this.PAGE_HEIGHT) {console.log(i)startY = 0if (i > 0) {splitDoms[i - 1].style.pageBreakBefore = 'always'; // 给前一个元素添加分页符}}}
}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 添加CSS样式以确保换页 */
@page {size: auto A4 landscape;margin-top: 20mm;
}@media print {.section {page-break-before: always;/* 在每个部分之前始终开始新页面 */margin-top: 0;}
}
td{border:solid 1px #f1f1f1;
}
</style>