当前位置：首页 > VUE

vue实现打印多页

2026-02-23 07:29:40VUE

Vue 实现多页打印的方法

在 Vue 中实现多页打印功能，可以通过以下方式完成：

使用 CSS 分页控制

通过 CSS 的 @page 和 page-break 属性控制打印分页：

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

在 Vue 模板中插入分页元素：

<template>
  <div>
    <div class="content">第一页内容</div>
    <div class="page-break"></div>
    <div class="content">第二页内容</div>
  </div>
</template>

使用 window.print() 方法

创建打印专用组件：

<template>
  <div ref="printContent">
    <!-- 多页内容 -->
    <div v-for="page in pages" :key="page.id">
      {{ page.content }}
      <div class="page-break" v-if="!page.last"></div>
    </div>
  </div>
</template>

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

使用打印专用样式表

创建单独的打印样式文件：

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

在 Vue 中动态加载：

import './print.css';

使用第三方库

考虑使用专门的打印库如 vue-print-nb：

安装：

npm install vue-print-nb

使用：

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

<template>
  <div id="print-content">
    <!-- 多页内容 -->
  </div>
  <button v-print="'#print-content'">打印</button>
</template>

处理动态内容分页

对于动态内容，计算分页逻辑：

methods: {
  chunkContent(content, itemsPerPage) {
    const pages = [];
    for (let i = 0; i < content.length; i += itemsPerPage) {
      pages.push({
        content: content.slice(i, i + itemsPerPage),
        last: i + itemsPerPage >= content.length
      });
    }
    return pages;
  }
}

打印预览优化

添加打印按钮和预览功能：

<template>
  <div>
    <button @click="printPreview">打印预览</button>
    <div v-if="previewMode" class="print-preview">
      <!-- 预览内容 -->
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    printPreview() {
      this.previewMode = true;
      setTimeout(() => {
        window.print();
        this.previewMode = false;
      }, 500);
    }
  }
}
</script>

以上方法可根据具体需求组合使用，实现 Vue 应用中的多页打印功能。

vue实现打印多页