Как загрузить файл с URL-адреса, возвращаемого API в React?

#html #reactjs

#HTML #reactjs

Вопрос:

У меня есть интерфейс, в котором перечислены документы, когда пользователь нажимает для загрузки, он вызывает API и запрашивает URL-адрес с токеном Amazon Storage SAS. Это происходит асинхронно, поэтому может занять короткое время. Как только URL-адрес будет возвращен, как я могу запустить загрузку?

Я не могу предварительно получить URL-адрес, поскольку у него есть токен SAS, срок действия которого истекает через определенный промежуток времени, пользователь может легко подождать этот период времени, прежде чем извлекать документ, и получит сообщение об ошибке «отказано в доступе».

Я не могу использовать тег привязки, поскольку URL-адрес неизвестен во время нажатия. Я мог бы создать новую кнопку с надписью загрузить, но теперь пользователь нажимает загрузить дважды для одного файла. Есть ли способ инициировать загрузку? Возможно, в useEffect?

Ответ №1:

   async donwloadWookLog(id) {
    const blob = await this.workLogService.getWorklog(id)
    .catch(error => {
      this.notify.showMessage('Unable to download work log.', 2000);
    });

    const url = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = 'work_log_'   id ' .xlsx';
    link.click();

    window.URL.revokeObjectURL(url);
  }
 

Пример кода TS