Скачать файл на React JS передается в виде байтового массива

Question

В БД я храню и изображение и файл в байтовом массиве. Из запроса (написанного в ядре .Net) я извлекаю байтовый массив во внешний интерфейс (написанный в реагирующем 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. В приведенном ниже коде я пытаюсь загрузить тот же файл, который вы выберете с помощью тега file в функции загрузки.

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