在Java后端和HTML前端之间实现实时交互的下载进度功能

一拳莫敌

已于 2024-05-31 15:47:44 修改

阅读量594

点赞数 3

文章标签：前端 java html

于 2024-05-31 15:43:17 首次发布

本文链接：https://blog.youkuaiyun.com/qq_40660389/article/details/139354518

版权

要在Java后端和HTML前端之间需要实现实时下载进度更新和回调功能，你需要在后端实现一个可以提供文件流并计算进度的服务，并在前端实现一个可以轮询进度并触发回调的机制。以下是一个简化的示例，展示如何使用Spring Boot和jQuery来实现这一功能。

后端：Java（使用Spring Boot）

在后端，你可以使用Spring Boot创建一个REST API来处理文件下载，并返回下载进度。

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.context.request.async.DeferredResult;

@RestController
public class DownloadController {

    private volatile int downloadProgress = 0;

    @GetMapping("/download/progress")
    public DeferredResult<String> getDownloadProgress() {
        DeferredResult<String> result = new DeferredResult<>();
        // 当进度更新时，完成DeferredResult
        // 在实际应用中，这可能在文件处理或传输逻辑中发生
        result.setResult("50%"); // 假设进度更新为50%
        return result;
    }

    @GetMapping("/download/file")
    public void downloadFile() {
        // 文件下载逻辑，这可能是一个异步操作
        // 当文件准备好下载时，更新进度
        // 在实际应用中，你需要在文件传输过程中不断更新进度
    }
}

前端：HTML + jQuery

在前端，你可以使用HTML和jQuery来创建一个用户界面，并使用Ajax来定期查询下载进度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Download Progress</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            function updateProgress() {
                $.get("/download/progress", function(data) {
                    $("#progress").html(data);
                    if (data === "100%") {
                        // 当进度达到100%时，触发回调
                        downloadComplete();
                    }
                });
            }

            function downloadComplete() {
                alert("Download complete!");
                // 这里可以执行下载完成后的回调操作
            }

            // 每秒更新一次进度
            setInterval(updateProgress, 1000);
        });
    </script>
</head>
<body>
    <h1>Download Progress</h1>
    <div id="progress">0%</div>
</body>
</html>

在这个示例中，jQuery通过$.get方法定期向后端请求下载进度，并将结果显示在<div id="progress">元素中。当进度达到100%时，会触发一个回调函数downloadComplete，你可以在这个函数中实现下载完成后的任何操作，比如显示消息、跳转页面等。

请注意，这个示例是非常简化的，实际应用中你需要考虑更多的因素，比如错误处理、下载进度的实际获取逻辑、异步下载处理等。此外，如果你想要一个更高级的进度条，你可能需要使用更复杂的HTML和CSS来创建视觉效果。