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);
  });  
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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