当前位置：首页 > VUE

vue实现小票打印功能

2026-01-23 04:10:17VUE

实现小票打印的几种方法

使用浏览器打印功能

通过调用浏览器的打印API实现小票打印是最简单的方式。Vue中可以通过window.print()方法触发打印对话框。

<template>
  <div class="receipt">
    <h3>订单信息</h3>
    <p>订单号: {{ orderNo }}</p>
    <p>日期: {{ date }}</p>
    <p>金额: {{ amount }}</p>
    <button @click="printReceipt">打印小票</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderNo: '20230001',
      date: '2023-05-20',
      amount: '¥100.00'
    }
  },
  methods: {
    printReceipt() {
      window.print()
    }
  }
}
</script>

<style>
@media print {
  /* 打印时隐藏按钮 */
  button {
    display: none;
  }
  /* 其他打印样式调整 */
  .receipt {
    width: 80mm;
    font-size: 12px;
  }
}
</style>

使用第三方库

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

安装依赖：

npm install vue-print-nb --save

使用示例：

import Vue from 'vue'
import Print from 'vue-print-nb'

Vue.use(Print)

// 组件中使用
<template>
  <div id="printContent">
    <!-- 小票内容 -->
  </div>
  <button v-print="printObj">打印</button>
</template>

<script>
export default {
  data() {
    return {
      printObj: {
        id: 'printContent',
        popTitle: '小票打印'
      }
    }
  }
}
</script>

连接热敏打印机

对于商业环境，通常需要连接热敏打印机。可以通过以下方式实现：

使用ESC/POS指令集通过串口或网络连接打印机
使用打印机厂商提供的SDK或API
通过云打印服务

示例代码（通过WebSocket连接网络打印机）：

methods: {
  printToThermalPrinter() {
    const receiptContent = this.generateReceiptText()
    const ws = new WebSocket('ws://打印机IP:端口')

    ws.onopen = () => {
      ws.send(receiptContent)
      ws.close()
    }
  },
  generateReceiptText() {
    // 生成符合打印机要求的文本格式
    return `
    ${this.orderNo}
    ${this.date}
    ${this.amount}
    -----------------
    `
  }
}

小票样式优化

为获得更好的打印效果，需要特别注意小票的样式设计：

vue实现小票打印功能

.receipt {
  width: 80mm; /* 标准小票宽度 */
  font-family: 'Arial', sans-serif;
  font-size: 12px;
  padding: 5mm;
  line-height: 1.2;
}

.receipt-header {
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
}

.receipt-footer {
  margin-top: 10px;
  text-align: center;
  font-size: 10px;
}