Как скачать файл, если с сервера мне приходит файл в виде бинарных данных?

Question

При нажатии на кнопку я делаю запрос к серверу, после чего в ответе мне приходит файл в виде бинарных данных. Как я могу при получении конвертировать файл и сразу же скачать его?

Я делал следующим образом, но файл при скачивании получается некорректный:

this.DownloadFile(id).then(res => {
        const blob = new Blob([res.data], { type: res.headers['content-type'] })
        const downloadUrl = window.URL.createObjectURL(blob)
        const linkUrl = document.createElement('a')

        linkUrl.download = downloadUrl
        linkUrl.href = downloadUrl
        document.body.appendChild(linkUrl)
        linkUrl.click()
        document.body.removeChild(linkUrl)
        linkUrl.remove()
      })

Answer 1

Можете попробывать через html2canvas&FileSaver

import html2canvas from 'html2canvas';
import FileSaver from 'file-saver';


function dataURLToBlob(dataURL) {
  var BASE64_MARKER = ';base64,';
  var parts;
  var contentType;
  var raw;

  if (dataURL.indexOf(BASE64_MARKER) === -1) {
    parts = dataURL.split(',');
    contentType = parts[0].split(':')[1];
    raw = decodeURIComponent(parts[1]);

    return new Blob([raw], {type: contentType});
  }

  parts = dataURL.split(BASE64_MARKER);
  contentType = parts[0].split(':')[1];
  raw = window.atob(parts[1]);
  var rawLength = raw.length;
  var uInt8Array = new Uint8Array(rawLength);

  for (var i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }

  return new Blob([uInt8Array], {type: contentType});
}

// Генерация и скачивание автоматический
function captureScreenshot() {
  const preview = document.querySelector('.preview-graphs');
  html2canvas(preview).then((canvas) => {
     const fileBlob = dataURLToBlob(canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream'));
     const fileName = `file.jpg`;
     FileSaver.saveAs(fileBlob, fileName);
  });  
}

Answer 2

Дело оказалось в том, что запрос я делал с помощью axios. И при запросе не указал параметр { responseType: 'blob' }... Если его не добавить, то файл может прийти в искаженном виде.

БЛОГ НА HUSL

Как скачать файл, если с сервера мне приходит файл в виде бинарных данных?

Ответы (2 шт):