分页打印 el-table时,如何为每一页增加表头(vue2/vue3)

在做公司项目需求的时候,遇到了一个打印表格的问题,产品项每一页都显示表头内容.项目用的是vue+element ui相关的技术栈

记录一下实现过程中遇到的问题.(实现思路都是相同的,主要是写法优点不同),在实现的过程中还是会有各种问题,打印预览第一页不显示,显示不全或者被截断的情况.

如果使用的是Vue2版本的话,UI组件时Element UI. el-table组件的表格的表头和内容是分开的.主要是为了实现表头固定效果.我们可以复制一份表格的表头,插入到下面的内容中.然后打印的时候,影藏掉原先表格的表头.

Vue2主要代码:

html代码部分

<template>
  <el-table :data="tableData" ref="mytable">
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
    </el-table-column>
    <el-table-column prop="address" label="地址">
    </el-table-column>
  </el-table>
</template>

javascript代码部分

export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  mounted: function () {
    // 等待DOM加载完成后再执行
    this.$nextTick(() => {
      let thead = this.$refs.mytable.$el.querySelector('.el-table__header-wrapper thead');
      let theadNew = thead.cloneNode(true);
      this.$refs.mytable.$el.querySelector('.el-table__body-wrapper table').appendChild(theadNew);
    });
  },
}

样式代码,@media print 媒体查询打印的时候样式.

.el-table>>>.el-table__body-wrapper table thead {
  display: none;
}

@media print {
  .el-table>>>.el-table__header-wrapper {
    display: none;
  }

  .el-table>>>.el-table__body-wrapper table thead {
    display: table-header-group;
  }
}

vue3 主要代码:

html代码部分

<template>
  <div>
    <div class="no-print">
      <el-button @click="handlePrint">打印表格</el-button>
    </div>

    <el-table
      ref="elTableRef"
      :data="tableData"
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="age" label="年龄" width="100" />
      <el-table-column prop="address" label="地址" width="150" />
      <el-table-column prop="job" label="职业" width="150" />
      <el-table-column prop="salary" label="工资" width="150" />

    </el-table>
  </div>
</template>

javascript代码

// setup语法
import { ref, nextTick,onMounted } from 'vue';
const elTableRef = ref();
const tableData = Array.from({ length: 100 }, (_, i) => ({
  name: `张三 ${i + 1}`,
  age: 20 + (i % 10),
  address: `中国某地 ${i + 1}`,
  job: `职位 ${i + 1}`,
  salary: '¥'+(3000 + i * 100).toFixed(2)
}));


onMounted(async () => {
  // console.log(elTableRef.value);
   await nextTick();

   setTimeout(() => {
    const tableEl = elTableRef.value?.$el;
  if (!tableEl) return;


  const headerTable = tableEl.querySelector('.el-table__header-wrapper table');
  const bodyTable = tableEl.querySelector('.el-table__body-wrapper table');


  // 先清理旧的 thead（防止重复插入）
  const existingClonedThead = bodyTable.querySelector('thead.clone-thead');
  if (existingClonedThead) {
    existingClonedThead.remove();
  }

  if (headerTable && bodyTable) {
    const thead = headerTable.querySelector('thead');
    if (thead) {
      const clonedThead = thead.cloneNode(true);
      console.log(555, clonedThead);
      clonedThead.classList.add('clone-thead'); // 标记用于清理
      bodyTable.insertBefore(clonedThead, bodyTable.firstChild);
    }
  }
   }, 100);
});

const handlePrint = async () => {
  await nextTick();
  const tableEl = elTableRef.value?.$el;
  if (!tableEl) return;
  const headerTable = tableEl.querySelector('.el-table__header-wrapper table');
  const bodyTable = tableEl.querySelector('.el-table__body-wrapper table');
  // 先清理旧的 thead（防止重复插入）
  const existingClonedThead = bodyTable.querySelector('thead.clone-thead');
  if (existingClonedThead) {
    existingClonedThead.remove();
  }
  if (headerTable && bodyTable) {
    const thead = headerTable.querySelector('thead');
    if (thead) {
      const clonedThead = thead.cloneNode(true);
      clonedThead.classList.add('clone-thead'); // 标记用于清理
      bodyTable.insertBefore(clonedThead, bodyTable.firstChild);
    }
  }

  window.print();

  // 打印后可选清除
  setTimeout(() => {
    const cloned = bodyTable.querySelector('thead.clone-thead');
    if (cloned) cloned.remove();
  }, 500);
};

样式部分:

<style>
.clone-thead{
  display: none;
}
@media print {
  tr {
    break-inside: avoid; 
    page-break-inside: avoid;
  }
  .el-scrollbar__view {
    display: block !important;
  }
  .el-table__inner-wrapper {
    height: auto;
  }
  .el-scrollbar {
    height: auto !important;
  }
}
  @media print {
    :deep(.el-table__header-wrapper table thead) {
      display: none!important;
    }
    .clone-thead {
      display: table-header-group;
    }
  }

  @media print {
  .el-table__header-wrapper {
    display: none !important;
  }
  thead {
    display: table-header-group !important;
  }
  tfoot {
    display: table-footer-group !important;
  }
  .no-print {
    display: none !important;
  }
  tr {
    page-break-inside: avoid;
  }
  .el-table__body-wrapper table,
  .el-table__body-wrapper table thead.clone-thead,
  .el-table__body-wrapper table tbody {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    table-layout: fixed !important;
    width: 100% !important;
  }
}
</style>