当前位置：首页 > VUE

vue实现分页打印

2026-03-30 06:30:44VUE

实现分页打印的基本思路

在Vue中实现分页打印功能，通常需要结合CSS的打印样式和JavaScript的打印API。核心是通过CSS控制打印时的分页行为，以及通过Vue动态生成需要打印的内容。

使用CSS控制分页

通过@media print媒体查询定义打印样式，利用page-break-before或page-break-after属性强制分页：

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

动态生成打印内容

在Vue组件中，根据数据动态生成需要打印的内容，并为每个分页添加分页控制类：

<template>
  <div>
    <div v-for="(page, index) in pages" :key="index" class="print-page">
      <!-- 当前页内容 -->
      <div v-for="item in page.items" :key="item.id">
        {{ item.content }}
      </div>
      <!-- 分页控制 -->
      <div v-if="index < pages.length - 1" class="page-break"></div>
    </div>
    <button @click="print">打印</button>
  </div>
</template>

实现打印功能

通过调用window.print()方法触发浏览器打印对话框。可以在打印前处理内容，打印后恢复原始状态：

<script>
export default {
  data() {
    return {
      allItems: [], // 所有数据
      perPage: 10,  // 每页条数
    };
  },
  computed: {
    pages() {
      // 分页处理
      const pages = [];
      for (let i = 0; i < this.allItems.length; i += this.perPage) {
        pages.push({
          items: this.allItems.slice(i, i + this.perPage)
        });
      }
      return pages;
    }
  },
  methods: {
    print() {
      window.print();
    }
  }
};
</script>

优化打印样式

为打印页面单独设置样式，隐藏不需要打印的元素，调整打印布局：

@media print {
  body * {
    visibility: hidden;
  }
  .print-page, .print-page * {
    visibility: visible;
  }
  .print-page {
    position: absolute;
    left: 0;
    top: 0;
  }
  .no-print {
    display: none;
  }
}

处理复杂打印需求

对于更复杂的打印需求，如表格分页、页眉页脚等，可以使用专门的打印库或更精细的CSS控制：

vue实现分页打印

<div class="print-header">页眉内容</div>
<div class="print-footer">页脚内容</div>

@media print {
  @page {
    size: A4;
    margin: 1cm;
  }
  .print-header {
    position: fixed;
    top: 0;
  }
  .print-footer {
    position: fixed;
    bottom: 0;
  }
}