当前位置：首页 > VUE

vue实现批量打印

2026-01-17 07:30:39VUE

实现思路

在Vue中实现批量打印功能，通常需要结合浏览器的打印API和前端模板渲染。核心步骤包括数据准备、模板设计、打印触发和样式控制。以下是具体实现方法：

vue实现批量打印

数据准备与模板设计

确保有一个包含所有需要打印数据的数组，每个元素代表一个独立的打印项。使用v-for循环渲染打印模板：

vue实现批量打印

<template>
  <div class="print-container">
    <div v-for="(item, index) in printItems" :key="index" class="print-item">
      <h3>{{ item.title }}</h3>
      <p>{{ item.content }}</p>
    </div>
  </div>
</template>

打印触发逻辑

通过window.print()触发浏览器打印对话框。为避免打印非目标内容，需要动态控制DOM的显示/隐藏：

methods: {
  handleBatchPrint() {
    const printWindow = window.open('', '_blank');
    printWindow.document.write(`
      <html>
        <head>
          <title>批量打印</title>
          <style>
            @media print {
              body { visibility: hidden; }
              .print-item { visibility: visible; page-break-after: always; }
            }
          </style>
        </head>
        <body>
          ${this.$refs.printContainer.innerHTML}
        </body>
      </html>
    `);
    printWindow.document.close();
    printWindow.focus();
    setTimeout(() => printWindow.print(), 500);
  }
}

样式控制与分页处理

通过CSS确保每个打印项单独成页，并隐藏非打印内容：

@media print {
  body * {
    visibility: hidden;
  }
  .print-item, .print-item * {
    visibility: visible;
  }
  .print-item {
    position: absolute;
    left: 0;
    top: 0;
    page-break-after: always;
  }
}

完整组件示例

<template>
  <div>
    <button @click="handleBatchPrint">批量打印</button>
    <div ref="printContainer" class="print-container" style="display:none;">
      <div v-for="(item, index) in printItems" :key="index" class="print-item">
        <!-- 自定义打印内容模板 -->
        <h3>{{ item.title }}</h3>
        <p>{{ item.content }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      printItems: [
        { title: '文档1', content: '这是第一个打印内容' },
        { title: '文档2', content: '这是第二个打印内容' }
      ]
    }
  },
  methods: {
    handleBatchPrint() {
      const printWindow = window.open('', '_blank');
      printWindow.document.write(`
        <!DOCTYPE html>
        <html>
          <head>
            <title>批量打印</title>
            <style>
              @media print {
                body { visibility: hidden; }
                .print-item { 
                  visibility: visible; 
                  page-break-after: always;
                  margin: 0;
                  padding: 20px;
                }
              }
            </style>
          </head>
          <body>
            ${this.$refs.printContainer.innerHTML}
          </body>
        </html>
      `);
      printWindow.document.close();
      setTimeout(() => {
        printWindow.print();
        printWindow.close();
      }, 500);
    }
  }
}
</script>