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>

通过字节数组传递的React js上的下载文件

1 个答案: