前端对接身份证阅读器/标签打印机/扫码枪记录

最近做的一个项目中前端对接了 身份证读卡设备、标签打印设备、扫码枪，在此记录一下踩过的坑。

一、身份证读卡设备对接

1.设备厂商都会有接口库 一般可以用C# C++来处理成一个类似桌面应用的东西，它会起一个本地的http服务。

2.需要安装厂商提供的驱动

3.电脑插入设备；放上身份证；启动第1点提到的服务；然后就可以获取到身份证上的一些信息了

二、标签打印机对接

标签打印机对接最主地方有2个：一个是在前端条码生成的时候；二个是打印机和打印预览的设置

1.前端生成条码 。

我是通过 JsBarCode 使用起来也简单 具体看文档。

我用到的2个主要配置： format、width.  因为我们条码格式所以选择了CODE128。根据实际需要设置width, width大小会影响条码的清晰度。

JsBarcode('#barcode', 'HPXL2021-02000000, {
              format: 'CODE128', //选择要使用的条形码类型
              width: 1, //设置条之间的宽度
              height: 50, //高度
              displayValue: true, //是否在条形码下方显示文字
              // fontOptions: 'bold', //使文字加粗体或变斜体
              // font: 'fantasy', //设置文本的字体
              // textAlign: 'left', //设置文本的水平对齐方式
              // textPosition: 'top', //设置文本的垂直位置
              // textMargin: 5, //设置条形码和文本之间的间距
              fontSize: 14 //设置文本的大小
              // background: '#eee', //设置条形码的背景
              // lineColor: '#2196f3', //设置条和文本的颜色。
              // margin: 10, //设置条形码周围的空白边距
            })

2.打印机和打印预览的设置

a)打印机设置 直接打设备客服 他们会教你怎么设置

b)打印预览比较重要的是如下图的几点

有时候打印出来的条码不清晰，那也有可能是标签纸的原因。我们用的热敏打印机，在调试的时候打印出来的条码一直不是很清晰，也找不到原因，报着试试看的心态换了一卷打印纸然后就清晰了。

三、扫码枪对接

扫码枪对接相对简单，USB连接，直接使用扫码即可，在页面输入框中监听 keyup事件 keycode=='13' （Vue中 简写 @keyup.enter.native）就可以获取到扫码的值。有一个需要特别注意的点（也是我踩过坑的），如果你的条码包括英文字母，在中文输入法下，扫码枪获取的内容会出现漏掉的情况（如上图 中文输入法时 有时候只扫出HPXL字母、有时候中间的2021漏掉了）也触发不了keyup.enter事件。