javascript - 在 React js 上下载文件作为字节数组传递

Question

在数据库中，我将图像和文件存储在字节数组中。从请求(用 .Net core 编写)中，我将字节数组检索到前端(用 React js 编写)。我可以使用显示图像

let image = 'data:image/jpeg;base64,' + byteArray;

而且效果很好。我想对文件执行同样的操作，单击时只需下载文件或在新选项卡中打开它。文件主要是PDF、word、excel。我尝试了两种方法，但似乎不起作用。

let uriContent = "data:application/octet-stream," + encodeURIComponent(file);
window.open(uriContent, "document");

是否需要在字节数组之前连接某种不同的字符串，或者我是否错误地使用了 blob？

let blob = new Blob(new Uint8Array(byteArray));
let file = reader.readAsArrayBuffer(blob);

理想情况下，在此转换之后，我将能够在 anchor 标记中传递文件

<a href={this.props.file}>Download File</a>

Answer 1

尝试一下，在转换为 blob 时，将类型指定为您的文件类型，例如 PDF 或任何文件类型，然后创建对象 url 并使用 window.open 在新窗口中打开。 在下面的代码中，我尝试下载相同的文件，您将在下载功能中使用文件标签选择该文件。

<input type="file" onChange="Upload(this)"></input>
<script>
  function Upload(element) {
    var reader = new FileReader();
    let file = element.files[0];
    reader.onload = function () {
      var arrayBuffer = this.result;
      Download(arrayBuffer, file.type);
    }
    reader.readAsArrayBuffer(file);
  }

  function Download(arrayBuffer, type) {
    var blob = new Blob([arrayBuffer], { type: type });
    var url = URL.createObjectURL(blob);
    window.open(url);
  }

</script>