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

Question

在数据库中，我将图像和文件存储在字节数组中。从请求（用 .Net 核心编写）我将字节数组检索到前端（用 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);

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

<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>