Как скачать файл формата zip с сервера?

Question

[Андрей]

Необходимо скачать через интерфейс заархивированный файл в формате zip.
Серверная сторона Express.js + Node.js

//В пост запросе принимается название файла
router.post("/getDownloadFile", async function (req, res){
 // Далее указываю путь до файла
  const file = `${__dirname}/../files/${req.body.fileName}`; 
 // Устанавливаю заголовок, что это сохранение файла
  res.setHeader('Content-disposition', 'attachment; filename=' + req.body.fileName + '.zip');
 //Отправляю этот файл
  res.download(file);
});

Клиентская сторона на React

// В запросе передаю название файла file
axios.post(`${config.url}/exchange/getDownloadFile`, {fileName: file}, {headers: {
             'responseType': 'blob'
            }
        }).then(function (response) {
           // Создаю url с полученными данными файла
            const url = window.URL.createObjectURL(
                new Blob([response.data], {type: "application/zip"}),
              );
           // Создаю элемент ссылки
            const link = document.createElement('a');
                link.href = url;
                link.setAttribute('download', file,);
                document.body.appendChild(link);

            // Запускаю клик по ссылке
            link.click();

            // Удаляю ссылку
            link.parentNode.removeChild(link);
          })

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

Answer 1

[IUII2]

братишка, если тебе еще актуально, я долго страдал не понимал почему так, в запросе axios или fetch надо указывать { responseType: 'blob' }для конфига и будет тебе счастье!
Все кто столкнется, ur wellcome

например вот накидал тебе провайдер для запроса через axios

const myNameProvider = {
  getDownloadDocs(idDocs: string): Promise<AxiosResponse> {
    return axios.get(`${VERS_API}/path/${id}/download-documents`, { responseType: 'blob' });
  },
};

соответственно в нужном месте чейнишь это дело

myNameProvider.getDownloadDocs(id)
  .then((resp) => {
    downloadFile(resp);
  })
  .catach((error) => {
    // че хочешь делаешь с эррором
  });

Ну а сам метод я накидал вот такой

const downloadFile = (response: AxiosResponse): void => {
  const blob = new Blob([response.data], { type: response.headers['content-type'] });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');

  link.href = url;
  link.download = `documents_${getCurrentDate()}.zip`;
  link.click();
  URL.revokeObjectURL(url);
};

не забывай учитывать какой у тебя mime файла, это я замокал под .zip, на самом деле смотри на свой формат header-е и подставляй нужный

Comments

[sknsdev]

Отдуши дружище, огромный респект

[IUII2]

sknsdev, ur welcome dude!

Answer 2

[ZizzX3]

тоже столкнулся с этим. как вы решили эту проблему?