如何在 Javascript 中创建包含任意八位字节的 blob

Question

我试图了解如何使用 Blob 对象以编程方式在客户端逐字节级别创建二进制文件 javascript。作为建立我的知识的一种方式，我正在尝试创建一个包含以下八位字节的单字节 blob：00000001。简单吧？不幸的是，我还不知道该怎么做。下面是我的代码的第一次迭代：

let downloadButton = document.getElementById('downloadButton');
downloadButton.addEventListener('click', function(){
  var myBlob = new Blob([1], {type : "octet/stream"});
  url = window.URL.createObjectURL(myBlob);
  let a = document.createElement('A');
  a.href = url;
  a.download = "testFileOctet";
  a.click();
});

当在十六进制编辑器中查看时，这不会产生所需的位序列“00000001”，我并不感到惊讶。然而，令我惊讶的是它输出 00110001，这是 '1' 的 UTF-8 字符编码。我知道因为 javascript 是弱类型的，所以所有数字都表示为 64 位浮点数，所以如果我有一个大的 64 位序列，我会理解的。或者，如果我将 MIME 类型指定为 'text/plain' 而不是 'octet/stream' 并获得 UTF-8 编码输出，我就会理解。

然而，就目前而言，我不知所措......我什至尝试了一些变体，我改变了被送入 Blob 构造函数的数组。我尝试了 [0x1] 而不是 [1]。同样的结果。我试过 [0b00000001]。相同的结果。

所以。我做错了什么以及如何在客户端 javascript 中创建字节级文件？这是我使用 Blob 构造函数的方式的问题，还是与我用来从浏览器中获取 Blob 的 URL 编码有关？任何帮助将不胜感激

Answer 1

Blob() 构造函数需要 Blob-parts、ArrayBuffer 或 USVStrings[= 的可能混合列表50=].

Blob-parts 是其他 Blob 对象。

ArrayBuffer 要么是 ArrayBuffer 对象，要么是您将传入列表的 TypedArray 的 .buffer 属性。

USVStrings 更像是 UTF-8 字符串。

在您的情况下，new Blob([1]) 数字 1 既不是 Blob，也不是 ArrayBuffer 或 TypedArray 将被强制转换为 USVString "1".

就像您调用 new Blob([{}]) 一样，文字对象将被强制转换为 USVString "[object Object]".

const obj = new Blob([{}]); new Response(obj).text().then(v=>console.log('obj', v)); const one = new Blob([1]); new Response(one).text().then(v=>console.log('one', v));

那么我们如何设置任意字节呢？

我们使用 ArrayBuffer 和不同的视图。

const buf = new ArrayBuffer(1); const view = new Uint8Array(buf); view[0] = 1; const blob = new Blob([buf]); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'one.bin'; document.body.append(a); a.click();

如何在 Javascript 中创建包含任意八位字节的 blob

How to create a blob containing an arbitrary octet in Javascript

javascript

url

byte

blob

client-side