JavaScript中如何获取BLOB的原始二进制内容？附代码示例

当然可以实现这个需求！Blob本身是二进制数据的容器，我们需要先读取它的原始二进制数据，再将每个字节转换成8位的二进制字符串，最后拼接成你想要的格式。下面是具体的实现方法：

核心思路 #

• 首先读取Blob的原始二进制数据，得到ArrayBuffer（这是最接近原始二进制的格式）
• 将ArrayBuffer转换为Uint8Array，方便逐个处理每个字节
• 将每个字节数值转换为8位二进制字符串（不足8位时补前导零）
• 用空格将所有二进制字符串连接起来

实现代码（Async/Await 版本，推荐） #

这种写法更简洁，符合现代JavaScript的异步编程风格：

async function blobToBinaryString(blob) {
  // 读取Blob为ArrayBuffer，获取原始二进制数据
  const arrayBuffer = await blob.arrayBuffer();
  // 转换为Uint8Array，每个元素对应一个字节的数值
  const uint8Array = new Uint8Array(arrayBuffer);
  // 遍历每个字节，转成8位二进制字符串后用空格连接
  return uint8Array.map(byte => {
    // toString(2)转二进制，padStart(8, '0')确保是8位长度
    return byte.toString(2).padStart(8, '0');
  }).join(' ');
}

// 测试你的示例Blob
const blob = new Blob(["Example"], { type: "text/plain" });
blobToBinaryString(blob).then(binaryStr => {
  console.log(binaryStr);
  // 输出结果："01000101 01111000 01100001 01101101 01110000 01101100 01100101"
});

兼容旧浏览器的回调版本 #

如果需要支持不支持async/await的旧浏览器，可以用FileReader的回调方式：

function blobToBinaryString(blob, callback) {
  const reader = new FileReader();
  reader.onload = function(e) {
    const arrayBuffer = e.target.result;
    const uint8Array = new Uint8Array(arrayBuffer);
    const binaryStr = uint8Array.map(byte => {
      return byte.toString(2).padStart(8, '0');
    }).join(' ');
    callback(binaryStr);
  };
  // 以ArrayBuffer格式读取Blob
  reader.readAsArrayBuffer(blob);
}

// 使用示例
const blob = new Blob(["Example"], { type: "text/plain" });
blobToBinaryString(blob, function(binaryStr) {
  console.log(binaryStr);
});

关键细节说明 #

• arrayBuffer()方法：这是Blob对象的异步方法，直接返回原始二进制数据的ArrayBuffer，比用readAsText等方法更直接，不会经过编码转换。
• Uint8Array：它是TypedArray的一种，每个元素代表一个8位的无符号整数（范围0-255），正好对应二进制数据的一个字节。
• padStart(8, '0')：确保每个字节的二进制字符串都是8位长度，比如字符'E'的ASCII码是69，二进制是1000101，补前导零后变成01000101，符合标准的字节表示。

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