将 Uint8Array 保存到二进制文件

Question

我正在开发一个网络应用程序，它可以打开二进制文件并允许对其进行编辑。

这个过程基本上就是

ondrop -> dataTransfer.files[0] -> FileReader -> Uint8Array

本质上，我希望能够将修改后的文件另存为二进制文件。理想情况下作为具有指定文件名的文件下载。

似乎没有任何标准方法可以做到这一点，这很糟糕，因为到目前为止的所有内容都得到了很好的支持。

我目前正在使用

String.fromCharCode()

将数组转换为字符串，使用 base64 编码，并在像

data:application/octet-stream;base64,..

这样的超链接中使用数据 uri，以及

download

属性来指定文件名。

它似乎可以工作，但它非常hacky，我认为将原始字节转换为字符串可能会引入编码问题，具体取决于字节值。我不希望数据损坏或破坏字符串。

除此之外，是否有更好/正确的方法来将字节数组作为二进制文件提供给用户？

Answer 1

这些是我用来跨浏览器下载文件的实用程序。这样做的妙处在于，您实际上可以将链接的

download

属性设置为您想要的文件名。

仅供参考，二进制的 mimeType 是

application/octet-stream

var downloadBlob, downloadURL;

downloadBlob = function(data, fileName, mimeType) {
  var blob, url;
  blob = new Blob([data], {
    type: mimeType
  });
  url = window.URL.createObjectURL(blob);
  downloadURL(url, fileName);
  setTimeout(function() {
    return window.URL.revokeObjectURL(url);
  }, 1000);
};

downloadURL = function(data, fileName) {
  var a;
  a = document.createElement('a');
  a.href = data;
  a.download = fileName;
  document.body.appendChild(a);
  a.style = 'display: none';
  a.click();
  a.remove();
};

用途：

downloadBlob(myBinaryBlob, 'some-file.bin', 'application/octet-stream');

Answer 2

（较短）ES6 版本的最佳答案：

const downloadURL = (data, fileName) => {
  const a = document.createElement('a')
  a.href = data
  a.download = fileName
  document.body.appendChild(a)
  a.style.display = 'none'
  a.click()
  a.remove()
}

const downloadBlob = (data, fileName, mimeType) => {

  const blob = new Blob([data], {
    type: mimeType
  })

  const url = window.URL.createObjectURL(blob)

  downloadURL(url, fileName)

  setTimeout(() => window.URL.revokeObjectURL(url), 1000)
}

Answer 3

我从此链接找到了解决方案：

“解决方案2： 根据 Mozilla 的说法。 以下示例介绍了如何使用 blob 创建类型化数组的 URL。此示例的来源来自 Mozilla 开发者网络的 Blob API 文档。”

var blob = new Blob([typedArray.buffer], {type: 'application/octet-stream'});

它适用于 Edge 和 Chrome。