vue实现表格分页打印

Vue 实现表格分页打印的方法

使用 window.print() 实现基础打印

在 Vue 项目中，可以通过调用 window.print() 方法触发浏览器的打印功能。需要为打印内容设置特定的样式，确保表格分页显示。

<template>
  <div>
    <button @click="handlePrint">打印表格</button>
    <div class="print-content">
      <table>
        <!-- 表格内容 -->
      </table>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handlePrint() {
      window.print();
    }
  }
};
</script>

<style>
@media print {
  body * {
    visibility: hidden;
  }
  .print-content, .print-content * {
    visibility: visible;
  }
  .print-content {
    position: absolute;
    left: 0;
    top: 0;
  }
  table {
    page-break-after: always;
  }
}
</style>

使用 CSS 控制分页

通过 CSS 的 page-break-before 和 page-break-after 属性，可以控制表格在打印时的分页行为。

@media print {
  table {
    width: 100%;
  }
  tr {
    page-break-inside: avoid;
  }
  .page-break {
    page-break-after: always;
  }
}

使用第三方库实现高级打印

如果需要更复杂的打印功能，可以使用第三方库如 vue-print-nb。

安装库：

npm install vue-print-nb --save

在 Vue 项目中使用：

<template>
  <div>
    <button v-print="printObj">打印表格</button>
    <div id="printContent">
      <table>
        <!-- 表格内容 -->
      </table>
    </div>
  </div>
</template>

<script>
import print from 'vue-print-nb';

export default {
  directives: {
    print
  },
  data() {
    return {
      printObj: {
        id: 'printContent',
        popTitle: '表格打印',
        extraCss: 'https://example.com/print.css'
      }
    };
  }
};
</script>

分页数据加载

对于大数据量的表格，可以在打印前对数据进行分页处理，确保每页显示适量的数据。

methods: {
  getPaginatedData(page, perPage) {
    const start = (page - 1) * perPage;
    const end = start + perPage;
    return this.tableData.slice(start, end);
  },
  printAllPages() {
    const perPage = 10;
    const totalPages = Math.ceil(this.tableData.length / perPage);

    for (let i = 1; i <= totalPages; i++) {
      const pageData = this.getPaginatedData(i, perPage);
      // 渲染并打印每一页
    }
  }
}

打印样式优化

为打印内容添加专门的样式，确保打印效果符合预期。

@media print {
  @page {
    size: A4;
    margin: 1cm;
  }
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid #000;
    padding: 8px;
    text-align: left;
  }
  thead {
    display: table-header-group;
  }
  tfoot {
    display: table-footer-group;
  }
}

通过以上方法，可以在 Vue 项目中实现表格的分页打印功能，根据实际需求选择合适的方式。