javascript - 如何在 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 组成的混合列表。

• 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 和它的不同 View 。

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();