当前位置：首页 > VUE

vue实现批量打印

2026-03-09 12:39:55VUE

Vue 实现批量打印的方法

使用 window.print() 方法

在 Vue 中可以通过调用浏览器的 window.print() 方法实现打印功能。对于批量打印，可以创建一个包含所有需要打印内容的隐藏容器，然后一次性打印。

<template>
  <div>
    <button @click="batchPrint">批量打印</button>
    <div ref="printContent" style="display: none;">
      <div v-for="(item, index) in items" :key="index">
        <h3>{{ item.title }}</h3>
        <p>{{ item.content }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { title: '文档1', content: '内容1' },
        { title: '文档2', content: '内容2' }
      ]
    }
  },
  methods: {
    batchPrint() {
      const printWindow = window.open('', '_blank');
      printWindow.document.write(this.$refs.printContent.innerHTML);
      printWindow.document.close();
      printWindow.print();
    }
  }
}
</script>

使用第三方库 vue-print-nb

vue-print-nb 是一个专门为 Vue 设计的打印插件，支持批量打印功能。

vue实现批量打印

安装插件：

npm install vue-print-nb --save

使用示例：

vue实现批量打印

<template>
  <div>
    <button v-print="printObj">批量打印</button>
    <div id="printContent">
      <div v-for="(item, index) in items" :key="index">
        <h3>{{ item.title }}</h3>
        <p>{{ item.content }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import print from 'vue-print-nb';
export default {
  directives: { print },
  data() {
    return {
      items: [
        { title: '文档1', content: '内容1' },
        { title: '文档2', content: '内容2' }
      ],
      printObj: {
        id: 'printContent',
        popTitle: '批量打印'
      }
    }
  }
}
</script>

使用 CSS 控制打印样式

通过 CSS 的 @media print 可以自定义打印样式，确保打印内容符合需求。

@media print {
  body * {
    visibility: hidden;
  }
  #printContent, #printContent * {
    visibility: visible;
  }
  #printContent {
    position: absolute;
    left: 0;
    top: 0;
  }
}

动态生成打印内容

如果需要动态生成打印内容，可以通过 Vue 的数据绑定和循环功能实现。

<template>
  <div>
    <button @click="generateAndPrint">生成并打印</button>
    <div ref="dynamicContent" style="display: none;"></div>
  </div>
</template>

<script>
export default {
  methods: {
    generateAndPrint() {
      const content = this.generateContent();
      this.$refs.dynamicContent.innerHTML = content;
      const printWindow = window.open('', '_blank');
      printWindow.document.write(this.$refs.dynamicContent.innerHTML);
      printWindow.document.close();
      printWindow.print();
    },
    generateContent() {
      let html = '';
      for (let i = 0; i < 5; i++) {
        html += `<div><h3>动态文档${i + 1}</h3><p>动态内容${i + 1}</p></div>`;
      }
      return html;
    }
  }
}
</script>