在React中使用react-qr-reader正确解码二维码返回的Uint8Array

首先，你遇到的乱码问题大概率和二维码内容的编码类型、或者返回的字节流本身不是纯UTF-8文本有关。以下是具体的排查和解决步骤：

1. 先确认字节流的原始内容形态 #

你提供的Uint8Array包含大量ASCII控制字符（如5、4、17这类低于32的字节）和非UTF-8单字节字符（如247、198），说明二维码内容可能不是普通的UTF-8文本，可能是：

• 非UTF-8编码的字符（如GBK、Shift-JIS）
• 二进制格式数据（如自定义协议、加密内容）
• 包含控制字符的特殊文本

2. 尝试不同解码方式 #

用ISO-8859-1解码（保留所有字节对应的字符） #

ISO-8859-1会直接将每个字节映射为对应的ASCII字符，不会丢弃或替换无法识别的字节，能帮你看到原始字符形态：

const uint8Array = new Uint8Array([
  65, 85, 118, 247, 38, 198, 66, 5, 102, 86, 37, 70, 247, 34, 4, 22, 151, 38,
  198, 150, 230, 87, 48, 236, 17, 236, 17, 236, 17, 236, 17, 236, 17, 236,
]);

const decoder = new TextDecoder('ISO-8859-1');
const decodedString = decoder.decode(uint8Array);
console.log(decodedString); // 输出AUv÷&ÆBfV%F÷"›&ƖæW0ìììììì

转换为十六进制查看原始字节 #

如果需要分析二进制内容，可将Uint8Array转为十六进制字符串：

const hexString = Array.from(uint8Array)
  .map(byte => byte.toString(16).padStart(2, '0'))
  .join('');
console.log(hexString); // 输出415576f726c642056652546f722204169326c696e657730ec11ec11ec11ec11ec11ec

尝试其他字符编码 #

如果二维码内容是中文或其他非英文文本，试试对应编码（如GBK、Big5）：

const gbkDecoder = new TextDecoder('GBK');
const gbkString = gbkDecoder.decode(uint8Array);
console.log(gbkString);

3. 检查react-qr-reader的配置 #

部分版本的react-qr-reader会根据二维码内容类型自动返回字符串或Uint8Array：

• 查看组件的onScan回调参数，是否有text字段直接返回解码后的字符串
• 检查组件文档，是否有配置项可以强制返回字符串类型的扫描结果

4. 确认二维码的原始用途 #

如果上述方法都无法得到可读文本，说明二维码可能包含的是二进制数据（如加密内容、文件片段），需要根据二维码的生成规则做对应处理（如解密、格式解析）

内容的提问来源于stack exchange，提问作者Gibson