当前位置：首页 > VUE

vue实现标签打印

2026-03-30 07:51:52VUE

使用vue-print-nb插件实现标签打印

安装vue-print-nb插件

npm install vue-print-nb --save

在main.js中引入并注册插件

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

在组件中使用v-print指令

vue实现标签打印

<template>
  <div>
    <button v-print="printObj">打印标签</button>
    <div id="printContent">
      <!-- 标签内容 -->
      <div class="label">标签内容示例</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      printObj: {
        id: 'printContent',
        popTitle: '标签打印',
        extraCss: 'https://example.com/print.css'
      }
    }
  }
}
</script>

<style>
@media print {
  .label {
    width: 100mm;
    height: 50mm;
    border: 1px solid #000;
    page-break-after: always;
  }
}
</style>

使用window.print()原生方法实现

创建打印模板组件

<template>
  <div>
    <button @click="printLabel">打印标签</button>
    <div ref="printContent" class="print-area">
      <div v-for="(item, index) in labels" :key="index" class="label">
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labels: [
        { content: '标签1' },
        { content: '标签2' }
      ]
    }
  },
  methods: {
    printLabel() {
      const printWindow = window.open('', '_blank')
      printWindow.document.write(`
        <html>
          <head>
            <title>标签打印</title>
            <style>
              .label {
                width: 100mm;
                height: 50mm;
                border: 1px solid #000;
                margin: 5mm;
                page-break-after: always;
              }
            </style>
          </head>
          <body>
            ${this.$refs.printContent.innerHTML}
          </body>
        </html>
      `)
      printWindow.document.close()
      printWindow.focus()
      printWindow.print()
      printWindow.close()
    }
  }
}
</script>

使用CSS控制打印样式

设置打印专用样式

vue实现标签打印

@media print {
  body * {
    visibility: hidden;
  }
  .print-area, .print-area * {
    visibility: visible;
  }
  .print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  .label {
    width: 100mm;
    height: 50mm;
    border: 1px solid #000;
    margin: 5mm;
    page-break-after: always;
  }
}

处理多页标签打印

配置分页和边距

@page {
  size: A4;
  margin: 0;
}
@media print {
  .label {
    width: 90mm;
    height: 50mm;
    margin: 5mm;
    float: left;
    page-break-inside: avoid;
  }
}

使用PDF生成后打印

安装html2pdf.js

npm install html2pdf.js

在组件中使用

import html2pdf from 'html2pdf.js'

export default {
  methods: {
    printToPDF() {
      const element = document.getElementById('printContent')
      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()
    }
  }
}