[前端]每间隔一段时间查询接口获取到百分比，在页面上按照百分比展示进度条，百分比进度后下载文件

梦里梦外; 2024-04-22 07:03 34阅读 0赞

#### 文章目录 ####

*  诉求
 *  技术选型
 *  前端代码
 *  逻辑分析
 *  注意点

## 诉求 ##

文件上传到oss，前端每间隔一段时间查询接口获取后端返回的进度，并在页面上按照百分比展示进度条，当达到百分比进度的时候下载文件

## 技术选型 ##

*  后端:SpringBoot + Oss + Redis + Swagger3(参考前一篇文章:[文件上传oss，并查询上传进度][oss])
 *  前端:JavaScript 实现(使用 JavaScript 定时器（例如 setInterval()）每隔一段时间执行一次函数来查询后端接口。在函数中，使用 XMLHttpRequest 或 Fetch API 向后端发起请求，并在响应中获取百分比。然后，使用 JavaScript 将百分比应用到页面上的进度条元素，例如设置进度条元素的 width 属性为百分比。)

## 前端代码 ##

<!DOCTYPE html>
    <html>
    <head>
        <title>Progress Bar Example</title>
        <style>
            .progress-container {
          
                width: 100%;
                height: 20px;
                background-color: #ddd;
                border-radius: 10px;
            }
    
            .progress-bar {
          
                width: 0%;
                height: 100%;
                background-color: #4CAF50;
                border-radius: 10px;
                transition: width 0.3s ease-in-out;
            }
        </style>
    </head>
    <body>
    <div class="progress-container">
        <div id="progress-bar" class="progress-bar"></div>
    </div>
    <script>
        // Get the progress bar element
        const progressBar = document.getElementById('progress-bar');
    
        // Call the function every 3 seconds
        var interval = setInterval(getProgress, 3000);
    
    	//获取进度
        function getProgress() {
          
            // Make a GET request to the backend endpoint
            fetch('http://localhost:8080/fileApi/simulateUploadedFile')
                .then(response => response.json())
                .then(data => {
          
                    // Update the progress bar width
                    //此处后端返回逻辑需要修改，返回int类型的数值，如后端返回String类型的50%，可能识别不了，%放到前端处理就好了
                    progressBar.style.width = `${ data.progress}%`;
                    //当进度到达100下载文件
                    if (data === 100) {
          
                        clearInterval(interval);
                        downloadFile();
                    }
                })
                .catch(error => {
          
                    console.error('Error fetching progress:', error);
                });
        }
    
    	//下载文件
        function downloadFile() {
          
            // Make a GET request to the backend endpoint to get the OSS URL of the file
            fetch('http://localhost:8080/fileApi/simulateUploadedFile')
                .then(response => response.json())
                .then(data => {
          
                    // Create a link element to trigger the browser to download the file
                    var a = document.createElement('a');
                    a.href = data.data;
                    a.download = 'file.zip';
                    a.click();
                })
                .catch(error => {
          
                    console.error('Error fetching file url:', error);
                });
        }
    </script>
    </body>
    </html>

## 逻辑分析 ##

1.  访问html时，到达间隔时间请求后端接口拿到进度信息
2.  拿到进度信息后对进度条的长度进行更新
3.  当进度条达到100%时，直接下载文件(下载文件这一步前端使用后端返回的oss地址即可)

## 注意点 ##

[文件上传oss，并查询上传进度][oss]

此篇文章中后端所用到的进度查询，以及进度达到100%返回的文件名，需要对上面参考文章的返回结构进行修改

@Data
    public class ExportProgress implements Serializable {
        
    
        @ApiModelProperty("进度（百分比）")
        private Integer progress;
    
        @ApiModelProperty("导出内容:oss地址信息")
        private String data;
    
        @ApiModelProperty("信息，异常时往里面写入")
        private String msg;
    
        @ApiModelProperty("code信息:约定200为成功code，500为失败code")
        private String code;
    
    }

样例数据

{
        
      "data": "http://xxx.oss-cn-hangzhou.aliyuncs.com/e1231ae3-54b8-4d25-a847-ef3f0452302c.xlsx",
      "progress": "100%",
      "code":200
    }

[oss]: https://blog.csdn.net/asd1358355022/article/details/128718810?spm=1001.2014.3001.5501