0

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

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

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()
      })
7
  • а как Вы поняли, что файл присылается неправильно? может там pdf или png.
    – KoVadim
    23 мар 2021 в 15:25
  • Ну я ведь его сразу скачиваю как видно из кода выше. После чего открываю скаченный файл, а там ошибка...
    – expromt192
    23 мар 2021 в 15:42
  • а что Вы ожидаете увидеть? может просто расширение нужно правильное указать
    – KoVadim
    23 мар 2021 в 16:08
  • Я ожидаю увидеть то что скачал) То есть например изображение в формате jpeg. Однако в итоге при скачивании получается формат jfif. Но при создании blob с сервера прилетает правильное расширение ('image/jpeg'), поэтому я никак не могу понять в чем же дело...
    – expromt192
    23 мар 2021 в 17:18
  • ну так jfif это и есть JPEG File Interchange Format.
    – KoVadim
    23 мар 2021 в 17:41

2 ответа 2

1

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

0

Можете попробывать через 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);
  });  
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.