vue开发前端怎么才能获取读卡器的数据

Question

把卡片放在读卡器上读取数据，读卡器用usb连接电脑，在网页端怎么才能获取到读取的数据

Answer 1

如果要在网页端读取读卡器的数据，可以使用 JavaScript 的 navigator.usb API。首先，需要在网页中申请 USB 设备的权限：

navigator.usb.requestDevice({ filters: [] })
  .then(device => {
    // 成功获取到 USB 设备
  })
  .catch(error => {
    // 获取 USB 设备失败
  });

然后，可以使用 device.transferIn 方法来读取读卡器的数据。

const reader = device.getConfiguration()[0].getInterface(0).claimInterface(0);

const readLoop = async () => {
  try {
    const result = await reader.transferIn(1, 1024);
    // result.data 中包含读取到的数据
    readLoop();
  } catch (error) {
    console.error(error);
  }
}

readLoop();

请注意，需要使用 HTTPS 或者本地开发时才能使用 navigator.usb API，因为它需要获取到设备的物理权限。

在 Vue.js 中使用这些代码，可以在组件的 created 生命周期函数中调用，或者使用计算属性来获取数据。

<template>
  <div>
    {{ cardData }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      cardData: '',
    };
  },
  computed: {
    async readCardData() {
      const device = await navigator.usb.requestDevice({ filters: [] });
      const reader = device.getConfiguration()[0].getInterface(0).claimInterface(0);
      while (true) {
        const result = await reader.transferIn(1, 1024);
        this.cardData = result.data;
      }
    },
  },
  created() {
    this.readCardData();
  },
};
</script>