electron/WEB端读取码枪数据

码枪

"码枪"通常是指条形码扫描枪，也叫条码阅读器或扫码枪。它是一种用于读取商品包装上的一维条形码或二维条码（如QR码）的电子设备。码枪通过光学原理，将条码的内容解码并转换为可编辑的数据，然后传输到计算机、收银系统或其他数据处理系统中，广泛应用于超市、仓库管理、图书馆、医院、物流等行业，实现快速、准确的数据采集和信息录入,它是一种输入设备,类似于键盘、鼠标等，都是用来向计算机输入数据的设备。

读取数据

如gif所示,码枪扫码后会触发键盘事件,按下相应的按键,结束时会触发Enter事件

如果数据中含有大写字母,还会触发shift按键,下面代码是个例子,它读取的数据是C752263-SZN6OP56O-1719805096976,依次的按键如下

barcode C
barcode 7
barcode 5
barcode 2
barcode 2
barcode 6
barcode 3
barcode -
barcode Shift
barcode S
barcode Shift
barcode Z
barcode Shift
barcode N
barcode 6
barcode Shift
barcode O
barcode Shift
barcode P
barcode 5
barcode 6
barcode Shift
barcode O
barcode -
barcode 1
barcode 7
barcode 1
barcode 9
barcode 8
barcode 0
barcode 5
barcode 0
barcode 9
barcode 6
barcode 9
barcode 7
barcode 6
barcode Enter

处理数据

之前WEB端写过类似码枪的处理,直接一个input框聚焦,然后码枪扫码就完事了,这次想不需要input框就能读取数据,写一个自定义hook(也适用于WEB端,文章标题起的有点歧义~~~)

//useKeyBarcode.ts
import { onMounted, onUnmounted } from 'vue'

let barcode = ''
let lastKeyTime = Date.now() // 初始化 lastKeyTime
const SCAN_THRESHOLD = 60 //间隔时间,判断是人为输入,还是码枪输入

export const useKeyBarcode = (cb: (arg0: string) => void) => {
  const keyDownEvent = (event) => {
    const currentTime = Date.now()
    const timeDifference = currentTime - lastKeyTime

    if (event.key !== 'Enter' && event.key !== 'Shift') { 
      if (timeDifference < SCAN_THRESHOLD) {//如果小于间隔时间,就是码枪输入,将字符串拼接
        barcode += event.key
      } else {
        barcode = event.key
      }
      lastKeyTime = currentTime // 更新 lastKeyTime
    }
    //打印的数据我放再下面
    console.log('barcode', barcode, timeDifference, event.key)
    if (event.key === 'Enter') {
      //enter事件调用回调函数,将拼接完整的数据传出去,然后置为空字符串
      cb(barcode)
      barcode = ''
    }
  }
  onMounted(() => {
    document.addEventListener('keydown', keyDownEvent)
  })
  onUnmounted(() => {
    document.removeEventListener('keydown', keyDownEvent)
  })
}

//useKeyBarcode.ts
//打印的数据,依次是当'barcode'-当前的barcode-输入间隔时间-按下的键盘KEY
barcode C 46489 C
useKeyBarcode.ts:20 barcode C7 15 7
useKeyBarcode.ts:20 barcode C75 17 5
useKeyBarcode.ts:20 barcode C752 15 2
useKeyBarcode.ts:20 barcode C7522 16 2
useKeyBarcode.ts:20 barcode C75226 16 6
useKeyBarcode.ts:20 barcode C752263 16 3
useKeyBarcode.ts:20 barcode C752263- 16 -
useKeyBarcode.ts:20 barcode C752263- 16 Shift
useKeyBarcode.ts:20 barcode C752263-S 17 S
useKeyBarcode.ts:20 barcode C752263-S 16 Shift
useKeyBarcode.ts:20 barcode C752263-SZ 17 Z
useKeyBarcode.ts:20 barcode C752263-SZ 16 Shift
useKeyBarcode.ts:20 barcode C752263-SZN 18 N
useKeyBarcode.ts:20 barcode C752263-SZN6 13 6
useKeyBarcode.ts:20 barcode C752263-SZN6 17 Shift
useKeyBarcode.ts:20 barcode C752263-SZN6O 17 O
useKeyBarcode.ts:20 barcode C752263-SZN6O 15 Shift
useKeyBarcode.ts:20 barcode C752263-SZN6OP 16 P
useKeyBarcode.ts:20 barcode C752263-SZN6OP5 15 5
useKeyBarcode.ts:20 barcode C752263-SZN6OP56 15 6
useKeyBarcode.ts:20 barcode C752263-SZN6OP56 16 Shift
useKeyBarcode.ts:20 barcode C752263-SZN6OP56O 16 O
useKeyBarcode.ts:20 barcode C752263-SZN6OP56O- 17 -
useKeyBarcode.ts:20 barcode C752263-SZN6OP56O-1 15 1
useKeyBarcode.ts:20 barcode C752263-SZN6OP56O-17 17 7
useKeyBarcode.ts:20 barcode C752263-SZN6OP56O-171 17 1
useKeyBarcode.ts:20 barcode C752263-SZN6OP56O-1719 15 9
useKeyBarcode.ts:20 barcode C752263-SZN6OP56O-17198 16 8
useKeyBarcode.ts:20 barcode C752263-SZN6OP56O-171980 17 0
useKeyBarcode.ts:20 barcode C752263-SZN6OP56O-1719805 14 5
useKeyBarcode.ts:20 barcode C752263-SZN6OP56O-17198050 16 0
useKeyBarcode.ts:20 barcode C752263-SZN6OP56O-171980509 17 9
useKeyBarcode.ts:20 barcode C752263-SZN6OP56O-1719805096 15 6
useKeyBarcode.ts:20 barcode C752263-SZN6OP56O-17198050969 16 9
useKeyBarcode.ts:20 barcode C752263-SZN6OP56O-171980509697 16 7
useKeyBarcode.ts:20 barcode C752263-SZN6OP56O-1719805096976 16 6
useKeyBarcode.ts:20 barcode C752263-SZN6OP56O-1719805096976 33 Enter

使用

<template>
</template>

<script setup lang="ts">
import { agentApi } from '@/apis/merchant'
import { UserAgent } from '@/apis/types/Agent'
import { useKeyBarcode } from '@/hooks'
import { ElMessage } from 'element-plus'

const seller = defineModel<UserAgent>('seller')

const buyer = defineModel<UserAgent>('buyer')

const emits = defineEmits(['scanSeller', 'scanBuyer'])
//扫码触发,处理数据
useKeyBarcode((code: string) => {
  const parts = code.split('-')
  const agentId = parts[1]
  if (agentId) {
    agentApi.getByAgentId(agentId).then((res) => {
      const agent = res.data.result
    })
  }
})
</script>

完毕~