Как запустить загрузку файла в React?

У меня есть веб-приложение, созданное в React. Для большинства URL-адресов требуется аутентификация (Bearer). Одной из конечных точек API является загрузка ZIP-файла. Я не уверен, как вызвать загрузку файла в браузере клиентов. Я не могу сделать <a>, потому что для этого нужен токен Bearer. Приложение React может загрузить его, но как мне заставить браузер принять загрузку? Спасибо.

Кажется, это не имеет ничего общего с React. Взгляните на Как я могу скачать файл с помощью window.fetch?

Felix Kling 22.12.2020 21:36

@FelixKling Спасибо, я удалил тег реакции.

Jason Leach 22.12.2020 23:48
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
2
1 667
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вот как вы запускаете загрузку:

fetch("https://yourfiledownload.api/getfile", {
        method: "POST",
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer XXXXXXXXXXX'
        }
    })
        .then(response => {
            const disposition = response.headers.get("content-disposition");
            filename = disposition.match(/filename=(.+)/)[1];
            return response.blob()
        })
        .then(blob => {
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = filename;
            document.body.appendChild(a); // we need to append the element to the dom -> otherwise it will not work in firefox
            a.click();
            a.remove();  //afterwards we remove the element again
            callback({msg: 'ok'})
        })

Это предполагает, что ваш API возвращает правильные данные, включая заголовки. Что-то вроде этого, например, в случае файла CSV:

res.setHeader('Access-Control-Expose-Headers', 'Content-Disposition');
res.setHeader('Content-disposition', 'attachment; filename=' + filename);
res.set('Content-Type', 'text/csv');

res.write("Some Data here");
res.end();

Обратите внимание, что Content-Disposition необходим для того, чтобы имя файла определялось вашим API и отправлялось обратно клиенту.

Другие вопросы по теме