Как скачать файл?

Question

[maestro07]

Есть get запрос который возвращает то что на картинке


как скачать этот файл при нажатии на кнопку?

Comments

[Lynn «Кофеман»]

Таки непонятно в чем проблема.
Тег A в реакте уже не работает?

Answer 1

[Александр]

const download = (name, blob) => {
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');

    link.setAttribute('href', url);
    link.setAttribute('download', name);
    link.addEventListener('click', () => {
        setTimeout(() => {
            URL.revokeObjectURL(url);
        });
    });

    link.click();
};

Comments

[maestro07]

Там надо через token еще обращаться

[Александр]

maestro07, Вы не поняли. Вот свой ответ Вы передаете в эту функцию.

download('Имя_файла.расширение', Ваш_ответ_от_сервера);

[maestro07]

Александр,
то что написали не подходит.
написал так:

downloadDocument("pkb-agreement-person")
.then((str) => {
  let encode = encodeURIComponent(
    str
  ).replace(/%([a-f0-9]{2})/gi, (m, $1) =>
    String.fromCharCode(parseInt($1, 16))
  );
  return btoa(encode);
})
.then((data) => {
  let content = data;
  let contentType =
    "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
  let sliceSize = 512;
  let byteCharacters = window.atob(content);
  let byteArrays = [];
  for (
    let offset = 0;
    offset < byteCharacters.length;
    offset += sliceSize
  ) {
    let slice = byteCharacters.slice(
      offset,
      offset + sliceSize
    );
    let byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }
    let byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }
  let blob = new Blob(byteArrays, {
    type: contentType,
  });
  let blobURL = URL.createObjectURL(blob);
  window.open(blobURL);
});

файл скачивается но ошибка при открытиии. Но я пробую скачать файл в постмане ошибок нет

[Александр]

maestro07, Сразу в binary его передавайте.

[maestro07]

Александр, как? не подскажите?

[Александр]

maestro07, Ну вот с сервера Вы что получаете? Binary, ByteArray, Base64? На скриншоте на binary похоже.

[maestro07]

Александр, как бэк говорит возвращает Content-Disposition: attachment

[Александр]

maestro07, Тогда сразу перенаправляйте в функцию.

fetch(your_url)
    .then(response => response.blob())
    .then(blob => download('file-name', blob));

[maestro07]

Александр,
выдает ошибку в response => response.blob(), response.blob is not a function

[Александр]

maestro07, А использовали fetch?

[maestro07]

Александр, нет, через axios и токеном

[Александр]

maestro07,

axios.get('URL', {
	responseType: 'blob'
}).then(response => {
	download('file-name', response.data);
});