当前位置：首页 > VUE

vue实现扫码打印

2026-02-22 08:57:03VUE

Vue 实现扫码打印方案

使用第三方扫码库

推荐使用 vue-qrcode-reader 或 html5-qrcode 实现扫码功能。安装依赖后，在组件中引入并使用扫码功能。

// 使用vue-qrcode-reader示例
<template>
  <qrcode-stream @decode="onDecode"></qrcode-stream>
</template>

<script>
import { QrcodeStream } from 'vue-qrcode-reader'
export default {
  components: { QrcodeStream },
  methods: {
    onDecode(decodedString) {
      this.printContent(decodedString)
    }
  }
}
</script>

打印功能实现

通过浏览器原生打印API window.print() 或使用打印库如 vue-print-nb 实现打印功能。需要将扫码获取的内容渲染到可打印区域。

// 打印方法示例
methods: {
  printContent(text) {
    const printWindow = window.open('', '_blank')
    printWindow.document.write(`<pre>${text}</pre>`)
    printWindow.document.close()
    printWindow.focus()
    printWindow.print()
  }
}

完整组件示例

结合扫码和打印功能的完整组件示例：

<template>
  <div>
    <qrcode-stream @decode="onDecode" v-if="!scannedResult"></qrcode-stream>
    <div v-else id="printable-area">
      {{ scannedResult }}
    </div>
    <button @click="handlePrint" v-if="scannedResult">打印</button>
  </div>
</template>

<script>
import { QrcodeStream } from 'vue-qrcode-reader'
export default {
  components: { QrcodeStream },
  data() {
    return {
      scannedResult: null
    }
  },
  methods: {
    onDecode(decodedString) {
      this.scannedResult = decodedString
    },
    handlePrint() {
      window.print()
    }
  }
}
</script>

<style>
@media print {
  body * {
    visibility: hidden;
  }
  #printable-area, #printable-area * {
    visibility: visible;
  }
  #printable-area {
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>