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

第一种：基于element表格分页

javascript 复制代码

<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>

第二种基于原生表格分页

javascript 复制代码

<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 = 0
            if (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>