当前位置：首页 > VUE

vue实现打印标签

2026-01-17 06:34:59VUE

实现 Vue 打印标签的方法

使用 window.print() 方法

在 Vue 中可以通过调用浏览器原生的 window.print() 方法实现打印功能。创建一个专门用于打印的组件或页面，隐藏不需要打印的元素。

<template>
  <div>
    <button @click="print">打印标签</button>
    <div id="printArea" class="print-only">
      <!-- 标签内容 -->
      <div v-for="item in labels" :key="item.id">
        {{ 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-only, .print-only * {
    visibility: visible;
  }
  .print-only {
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>

使用第三方库 vue-print-nb

vue-print-nb 是一个专门为 Vue 设计的打印插件，使用起来更加方便。

安装插件：

npm install vue-print-nb --save

在 main.js 中引入：

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

在组件中使用：

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

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

使用 html2canvas 和 jsPDF 生成 PDF

如果需要将标签转换为 PDF 再打印，可以使用 html2canvas 和 jsPDF 库。

安装依赖：

npm install html2canvas jspdf --save

实现代码：

<template>
  <div>
    <button @click="printPDF">打印PDF标签</button>
    <div id="pdfContent">
      <!-- 标签内容 -->
      <div v-for="item in labels" :key="item.id">
        {{ item.text }}
      </div>
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'

export default {
  data() {
    return {
      labels: [
        { id: 1, text: '标签1' },
        { id: 2, text: '标签2' }
      ]
    }
  },
  methods: {
    printPDF() {
      const element = document.getElementById('pdfContent')
      html2canvas(element).then(canvas => {
        const imgData = canvas.toDataURL('image/png')
        const pdf = new jsPDF()
        pdf.addImage(imgData, 'PNG', 0, 0)
        pdf.save('labels.pdf')
      })
    }
  }
}
</script>

使用 CSS 控制打印样式

通过 CSS 的 @media print 可以精细控制打印时的样式，确保标签打印效果符合要求。

@media print {
  @page {
    size: A4;
    margin: 0;
  }
  body {
    margin: 1.6cm;
  }
  .no-print {
    display: none;
  }
  .page-break {
    page-break-after: always;
  }
}

使用专用标签打印插件

对于专业的标签打印需求，可以考虑使用 Labelary 等 Web 服务，它们提供 API 来生成和打印标签。

vue实现打印标签

// 示例调用 Labelary API
fetch('http://api.labelary.com/v1/printers/8dpmm/labels/4x6/0/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/zpl'
  },
  body: '^XA^FO50,50^ADN,36,20^FDHello World^FS^XZ'
})
.then(response => response.blob())
.then(blob => {
  const url = URL.createObjectURL(blob)
  window.open(url)
})