Скачать и заархивировать файлы в React?

У меня есть приложение, которое хранит консультации для пользователей. Консультация имеет данные о пользователе и имеет прикрепленные к консультации документы. Моя цель — вернуть пользователю все документы, которые были прикреплены к консультации в zip-архиве. Довольно прямолинейно.

У нас есть 5-секундное ограничение тайм-аута. Первоначально я думал, что мы можем просто скачать файлы и заархивировать их на стороне сервера. Таким образом, я мог бы просто создать новую конечную точку, которая вернула бы почтовый индекс пользователю. Но из-за 5-секундного перерыва это может не сработать.

Поэтому я изучаю загрузку и архивирование файлов на стороне клиента. Внешний интерфейс построен на React, и я рассматривал возможность использования JSZip. Хотя почти все, что я нашел, использует JSZip, использует его на стороне сервера.

Можно ли загружать и архивировать файлы на стороне клиента с помощью React? Есть ли библиотека, которую я мог бы использовать? Или это все должно быть на стороне сервера?


reactjs react-redux zip zipfile jszip
person Arturo Aguila    schedule 11.12.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать JsZip на стороне клиента. Например, если вы хотите скачать изображение, вам нужен его URL. Затем сделайте запрос с помощью axios. Как это:

request = (currentUrl: string): Promise<void> => axios({
    url: currentUrl,
    method: 'GET',
    responseType: 'blob',
}).then((response) => {
    const url: string = window.URL.createObjectURL(new Blob([response.data]));
});

затем используйте URL-адрес, который axios дал вам в ответ, чтобы загрузить файл

person Sinane    schedule 11.12.2018
comment
Чтобы использовать Jszip на стороне клиента, сопоставьте список файлов, которые вы хотите заархивировать, и добавьте response.data к вашему JSZip для каждого файла вашего списка. - person Sinane; 11.12.2018
comment
Прохладный. Наконец-то я заставил JSZip работать. Можно ли загружать файлы с сервера, а затем заархивировать их на стороне клиента с помощью JSZip? - person Arturo Aguila; 11.12.2018
comment
Да, вам просто нужно сделать тот же запрос ajax со стороны сервера - person Sinane; 11.12.2018