当前位置：首页 > VUE

vue实现打印多页

2026-01-22 16:37:29VUE

Vue 实现多页打印的方法

在 Vue 中实现多页打印通常需要处理分页、样式调整和打印触发逻辑。以下是几种常见的方法：

使用 CSS 分页控制

通过 CSS 的 page-break 属性可以控制打印时的分页行为。在 Vue 模板中为需要分页的元素添加样式：

<template>
  <div class="print-container">
    <div v-for="(page, index) in pages" :key="index" class="page">
      <!-- 页面内容 -->
      <div v-html="page.content"></div>
    </div>
  </div>
</template>

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

使用 window.print() 方法

在 Vue 组件中调用浏览器的打印功能：

vue实现打印多页

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

使用第三方库

vue-print-nb 是一个流行的 Vue 打印插件：

import Print from 'vue-print-nb'

Vue.use(Print);

// 在模板中使用
<button v-print="'#print-area'">打印</button>
<div id="print-area">
  <!-- 打印内容 -->
</div>

动态生成打印内容

对于需要从数据动态生成多页内容的情况：

vue实现打印多页

data() {
  return {
    items: [], // 你的数据
    itemsPerPage: 10 // 每页显示数量
  }
},
computed: {
  pages() {
    const pages = [];
    for (let i = 0; i < this.items.length; i += this.itemsPerPage) {
      pages.push(this.items.slice(i, i + this.itemsPerPage));
    }
    return pages;
  }
}

处理打印样式

创建专门的打印样式表：

<style scoped>
@media print {
  body * {
    visibility: hidden;
  }
  .print-content, .print-content * {
    visibility: visible;
  }
  .print-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}
</style>

使用 iframe 打印

对于更复杂的打印需求，可以创建 iframe 来加载打印内容：

printWithIframe() {
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  document.body.appendChild(iframe);

  const content = this.generatePrintContent();
  iframe.contentDocument.write(content);
  iframe.contentDocument.close();

  iframe.contentWindow.focus();
  iframe.contentWindow.print();

  setTimeout(() => {
    document.body.removeChild(iframe);
  }, 100);
}