当前位置：首页 > VUE

vue实现分页打印

2026-03-09 18:46:51VUE

Vue 实现分页打印的方法

在 Vue 中实现分页打印功能，可以通过 CSS 控制打印样式并结合 Vue 的数据分页逻辑完成。

使用 CSS 控制打印分页

通过 @media print 设置打印样式，利用 page-break-after 或 page-break-before 属性强制分页：

@media print {
  .page-break {
    page-break-after: always;
  }
}

分页数据逻辑

在 Vue 组件中，通过计算属性或方法对数据进行分页处理：

export default {
  data() {
    return {
      items: [], // 原始数据
      currentPage: 1,
      itemsPerPage: 10
    };
  },
  computed: {
    paginatedItems() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      return this.items.slice(start, start + this.itemsPerPage);
    }
  }
};

打印按钮与分页控制

在模板中添加打印按钮和分页控制：

<template>
  <div>
    <div v-for="(item, index) in paginatedItems" :key="index">
      {{ item }}
      <!-- 在需要分页的位置添加分页标记 -->
      <div v-if="(index + 1) % itemsPerPage === 0" class="page-break"></div>
    </div>
    <button @click="print">打印</button>
  </div>
</template>

打印方法实现

调用浏览器的打印功能：

methods: {
  print() {
    window.print();
  }
}

完整示例

结合分页和打印功能的完整组件示例：

vue实现分页打印

<template>
  <div>
    <div v-for="(item, index) in paginatedItems" :key="index">
      <div>{{ item }}</div>
      <div v-if="shouldPageBreak(index)" class="page-break"></div>
    </div>
    <button @click="print">打印全部</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`),
      currentPage: 1,
      itemsPerPage: 5
    };
  },
  computed: {
    paginatedItems() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      return this.items.slice(start, start + this.itemsPerPage);
    }
  },
  methods: {
    shouldPageBreak(index) {
      return (index + 1) % this.itemsPerPage === 0;
    },
    print() {
      window.print();
    }
  }
};
</script>

<style>
@media print {
  .page-break {
    page-break-after: always;
  }
}
</style>