reactjs - react : download a file with Axios using a progress bar

Question

我有一个以这种方式下载 zip 文件的应用程序。它正常工作，但单击时，下载在后台执行，浏览器仅在本地下载整个流后才显示文件的实际下载。因此，如果文件下载需要 1 分钟，则用户不了解该网站在做什么。有什么方法可以显示进度条吗？

await axios({
      url: sUrl,
      method: "GET",
      responseType: "blob" // important
    })
      .then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement("a");
        link.href = url;
        link.setAttribute("download", fname); //or any other extension
        document.body.appendChild(link);
        link.click();
        this.setState({ downloading: false });
      })
      .catch(error => {
        this.setState({ downloading: false });
        message.warn("Errore: " + error.message);
        return [];
      });

Answer 1

是的，您可以使用 axios 包提供的 onDownloadProgress 方法来实现此目的，请查看以下示例:

await axios({
    url: sUrl,
    method: "GET",
    responseType: "blob", // important
    onDownloadProgress: (progressEvent) => {
        let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total); // you can use this to show user percentage of file downloaded
    }
})