当前位置：首页 > VUE

vue实现标签打印

2026-01-17 14:35:28VUE

Vue 实现标签打印

在 Vue 中实现标签打印通常需要结合浏览器的打印功能和 CSS 控制打印样式。以下是几种常见的方法：

使用 window.print() 方法

创建一个专门用于打印的组件或页面，通过 window.print() 触发浏览器打印对话框。

<template>
  <div>
    <button @click="print">打印标签</button>
    <div class="print-content" ref="printContent">
      <!-- 标签内容 -->
      <div v-for="item in labels" :key="item.id" class="label">
        {{ item.text }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labels: [
        { id: 1, text: '标签1' },
        { id: 2, text: '标签2' }
      ]
    }
  },
  methods: {
    print() {
      window.print()
    }
  }
}
</script>

<style>
@media print {
  body * {
    visibility: hidden;
  }
  .print-content, .print-content * {
    visibility: visible;
  }
  .print-content {
    position: absolute;
    left: 0;
    top: 0;
  }
}
.label {
  width: 50mm;
  height: 30mm;
  border: 1px dashed #ccc;
  margin: 5px;
  display: inline-block;
}
</style>

使用第三方库

对于更复杂的打印需求，可以使用专门的打印库如 vue-print-nb。

安装库：

npm install vue-print-nb --save

使用示例：

<template>
  <div>
    <button v-print="printObj">打印标签</button>
    <div id="printContent">
      <!-- 标签内容 -->
      <div v-for="item in labels" :key="item.id" class="label">
        {{ item.text }}
      </div>
    </div>
  </div>
</template>

<script>
import print from 'vue-print-nb'
export default {
  directives: {
    print
  },
  data() {
    return {
      labels: [
        { id: 1, text: '标签1' },
        { id: 2, text: '标签2' }
      ],
      printObj: {
        id: 'printContent',
        popTitle: '标签打印'
      }
    }
  }
}
</script>

打印样式控制

通过 CSS 的 @media print 规则控制打印时的样式，确保标签布局正确。

@media print {
  @page {
    size: A4 landscape;
    margin: 0;
  }
  body {
    margin: 0;
    padding: 0;
  }
  .label {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

生成 PDF 打印

如果需要生成 PDF 再打印，可以使用 html2pdf.js 等库。

安装：

npm install html2pdf.js

使用示例：

<template>
  <div>
    <button @click="generatePDF">生成PDF并打印</button>
    <div id="pdfContent">
      <!-- 标签内容 -->
    </div>
  </div>
</template>

<script>
import html2pdf from 'html2pdf.js'
export default {
  methods: {
    generatePDF() {
      const element = document.getElementById('pdfContent')
      const opt = {
        margin: 10,
        filename: 'labels.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
      }
      html2pdf().from(element).set(opt).save()
    }
  }
}
</script>

以上方法可以根据实际需求选择使用，简单的标签打印使用 window.print() 配合 CSS 即可，复杂需求可考虑专门的打印库或 PDF 生成方案。

vue实现标签打印