在react中通过File-Saver插件保存文件时需要在浏览器中显示下载进度

在React中利用File-Saver插件（如`js-file-saving`）保存文件并显示下载进度，通常需要结合使用一些额外的技术和库，比如`xhr2`来处理异步上传，并监听`progress`事件来更新进度。以下是实现步骤：

1. 首先，在项目中安装必要的依赖：

   npm install js-file-saving axios

2. 引入所需的模块：

   import saveAs from 'js-file-saving';
   const axios = require('axios');

3. 创建一个函数来处理文件上传和进度更新：

   const downloadWithProgress = async (file, fileName) => {
     const formData = new FormData();
     formData.append('file', file);

     try {
       const response = await axios.post('/api/upload', formData, {
         onUploadProgress: (event) => {
           if (event.lengthComputable) {
             const percentComplete = Math.round((event.loaded / event.total) * 100);
             console.log(`Download progress: ${percentComplete}%`);
           }
         },
       });

       // 获取服务器返回的下载链接或文件数据
       const downloadUrl = response.data.downloadUrl;

       // 使用File-Saver下载文件
       saveAs(downloadUrl, fileName);
     } catch (error) {
       console.error('Error saving file:', error);
     }
   };

4. 调用这个函数，传入用户选择的文件和文件名：

   const handleFileSelect = (e) => {
     const file = e.target.files[0];
     downloadWithProgress(file, file.name);
   };

   // 在组件的适当位置添加文件输入元素和事件监听
   <input type="file" onChange={handleFileSelect} />

5.