將 Uint8Array 保存到二進制文件

Question

我正在開發一個可以打開二進制文件並允許對其進行編輯的 Web 應用程序。

這個過程基本上就是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)
}