当前位置：首页 > VUE

vue实现分页打印

2026-02-18 05:50:29VUE

Vue 实现分页打印的方法

在 Vue 中实现分页打印功能通常需要结合 CSS 和 JavaScript 来完成。以下是几种常见的方法：

使用 CSS 分页控制

通过 CSS 的 page-break 属性可以控制打印时的分页行为。

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

在 Vue 模板中，可以在需要分页的地方添加对应的类名：

<div v-for="(item, index) in items" :key="index">
  <div v-if="index % 10 === 0 && index !== 0" class="page-break"></div>
  <!-- 内容 -->
</div>

使用 window.print() 方法

通过 JavaScript 调用浏览器的打印功能，结合分页逻辑实现打印。

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

使用第三方库

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

安装：

npm install vue-print-nb --save

使用：

import Print from 'vue-print-nb'
Vue.use(Print);

在模板中：

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

<script>
export default {
  data() {
    return {
      printObj: {
        id: 'printContent',
        popTitle: '打印标题'
      }
    }
  }
}
</script>

动态生成打印内容

对于需要动态分页的内容，可以在打印前处理数据并生成分页标记。

methods: {
  preparePrintContent() {
    const itemsPerPage = 10;
    const pages = [];
    for (let i = 0; i < this.items.length; i += itemsPerPage) {
      pages.push(this.items.slice(i, i + itemsPerPage));
    }
    this.printPages = pages;
  }
}

在模板中渲染分页内容：

<div v-for="(page, pageIndex) in printPages" :key="pageIndex" class="print-page">
  <div v-for="(item, itemIndex) in page" :key="itemIndex">
    <!-- 每页内容 -->
  </div>
</div>

打印样式优化

通过 CSS 媒体查询优化打印样式，确保打印效果符合预期。

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

以上方法可以根据实际需求选择或组合使用，以实现 Vue 中的分页打印功能。

vue实现分页打印