当前位置：首页 > VUE

Vue实现打印贴纸

2026-02-20 12:57:10VUE

使用Vue实现打印贴纸功能

在Vue中实现打印贴纸功能，可以通过结合HTML模板和CSS样式，利用浏览器的打印功能完成。以下是实现步骤：

安装依赖 需要安装vue-print-nb插件，这是一个Vue专用的打印插件。

npm install vue-print-nb --save

注册打印指令 在Vue项目的入口文件（如main.js）中注册打印指令。

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

创建贴纸模板 在Vue组件中设计贴纸的HTML模板，使用CSS确保打印时的样式正确。

<template>
  <div>
    <button v-print="printObj">打印贴纸</button>
    <div id="stickerTemplate" class="sticker">
      <div class="sticker-content">
        <h3>产品名称</h3>
        <p>价格: ¥100</p>
        <p>条形码: 123456789</p>
      </div>
    </div>
  </div>
</template>

配置打印选项 在Vue组件的data中配置打印选项，指定要打印的元素ID。

data() {
  return {
    printObj: {
      id: 'stickerTemplate',
      popTitle: '贴纸打印'
    }
  }
}

添加打印样式 使用CSS确保打印时贴纸的布局和样式符合要求。

@media print {
  .sticker {
    width: 50mm;
    height: 30mm;
    border: 1px dashed #ccc;
    padding: 5mm;
    margin: 0 auto;
  }
  button {
    display: none;
  }
}

实现多贴纸批量打印

若需要批量打印多个贴纸，可以通过循环生成多个贴纸模板，并调整打印样式。

动态生成贴纸 在Vue模板中使用v-for循环生成多个贴纸。

<div id="stickerTemplate">
  <div class="sticker" v-for="item in stickers" :key="item.id">
    <div class="sticker-content">
      <h3>{{ item.name }}</h3>
      <p>价格: ¥{{ item.price }}</p>
      <p>条形码: {{ item.barcode }}</p>
    </div>
  </div>
</div>

调整打印样式 修改CSS确保多个贴纸在打印时正确分页或排列。

@media print {
  .sticker {
    width: 50mm;
    height: 30mm;
    border: 1px dashed #ccc;
    padding: 5mm;
    margin: 5mm;
    display: inline-block;
    page-break-inside: avoid;
  }
}

使用第三方库增强功能

若需要更复杂的打印功能（如PDF导出），可以集成html2canvas和jsPDF库。

安装库

npm install html2canvas jspdf --save

实现PDF导出 在Vue组件中添加PDF导出方法。

Vue实现打印贴纸

methods: {
  exportToPDF() {
    html2canvas(document.getElementById('stickerTemplate')).then(canvas => {
      const imgData = canvas.toDataURL('image/png');
      const pdf = new jsPDF();
      pdf.addImage(imgData, 'PNG', 0, 0);
      pdf.save('stickers.pdf');
    });
  }
}