Блог

Файл, который я создаю, возвращается в ответе в виде строки вместо запроса на загрузку.

Я видел и пробовал несколько подходов к этому с помощью stackoverflow / других веб-сайтов, и в конечном итоге все они привели к одной и той же проблеме.

Я пытался:

1. Создание временного файла, запись в него, затем перемещение его в новое место с хранилищем::put и загрузка из этого места с помощью response()->загрузить.
2. Запись во временный файл и повторение/чтение его при закрытии потоковой загрузки.
3. Запись во временный файл и чтение его после завершения (при предварительной настройке заголовков)

Я публикую полезную нагрузку формы с помощью Axios с заголовками

 'content-type': 'multipart/form-data',
'X-CSRF-TOKEN': 'csrfToken'
 

Заголовки, которые я использую для ответа, следующие:

 'Content-Type: text/csv',
'Content-Disposition: attachment; filename=myFile.csv'
 

Я попытался установить заголовки с помощью header() и создать массив, а затем передать его в streamDownload/download в качестве аргументов заголовка.

Загрузка файла работает/запрашивается нормально, если я просто создам форму и отправлю ее с помощью form.submit(). Я сталкиваюсь с этой проблемой только тогда, когда пытаюсь сделать это асинхронно с помощью прямого запроса post с Axios.

Я в полной растерянности по поводу того, что вызывает это несоответствие, так как при отправке формы обычно запрашивается загрузка в полном порядке.

Мне удалось решить эту проблему, используя возвращенный ответ, создав с его помощью большой двоичный объект и запросив загрузку с помощью большого двоичного объекта.

  let config = {
     headers: {
         'content-type': 'multipart/form-data',
         'responseType': 'blob',
         'X-CSRF-TOKEN': csrfToken
     }
 };
            

axios.post(downloadRoute, payload, config).then(response => {
    const downloadUrl = window.URL.createObjectURL(new Blob([response.data.fileOutput]));
    const link = document.createElement('a');
    link.href = downloadUrl;
    link.setAttribute('download', 'myfile.csv');
    document.body.appendChild(link);
    link.click();
    link.remove();
});
 

Надеюсь, это поможет любому, кто окажется в такой же ситуации!