演示

这里演示一个Demo，在点击下载摁钮后，弹出加loading框。在读取到服务器的响应的文件后。关闭loading框。并且在控制台中输出下载的进度。

有点像是监听文件下载完毕的意思，也只能是像。从内存IO到磁盘的这个过程，JS代码，再也无法染指过程。更谈不上监听了。

Controller

服务端的下载实现

import java.io.BufferedInputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;


@Controller
@RequestMapping("/download")
public class DownloadController {
    
    @GetMapping
    public void download (HttpServletRequest request,
                            HttpServletResponse response,
                            @RequestParam("file") String file) throws IOException {
        
        Path path = Paths.get(file);
        if (Files.notExists(path) || Files.isDirectory(path)) {
            // 文件不存在，或者它是一个目录
            response.setStatus(HttpServletResponse.SC_NOT_FOUND);
            return ;
        }
        
        String contentType = request.getServletContext().getMimeType(file);
        if (contentType == null) { 
            // 如果没读取到ContentType，则设置为默认的二进制文件类型
            contentType = "application/octet-stream";
        }
        
        
        try (BufferedInputStream bufferedInputStream = new BufferedInputStream(Files.newInputStream(path))){

            response.setContentType(contentType);
            response.setHeader("Content-Disposition", "attachment; filename=" + new String(path.getFileName().toString().getBytes("GBK"), "ISO-8859-1"));
            
            // 关键点，给客户端响应Content-Length头，客户端需要用此来计算下载进度
            response.setContentLengthLong(Files.size(path));
            
            OutputStream outputStream = response.getOutputStream();
            
            byte[] buffer = new byte[8192];
            
            int len = 0;
            
            while ((len = bufferedInputStream.read(buffer)) != -1) {
                outputStream.write(buffer, 0, len);
            }
            
        } catch (IOException e) {
            
        }
    }
}

Index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>异步下载</title>
    </head>
    <body>
        <input name="name" value="D:\\eclipse-jee-2019-12-R-win32-x86_64.zip" placeholder="输入你要下载的文件路径" id="file" />
        <button id="button" onclick="downlod();">开始下载</button>
    </body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
    <script src="/layer/layer.js"></script>
    <script type="text/javascript">
        function downlod(){
            const file = document.querySelector('#file').value;
            if (!file){
                alert('请输入合法的文件地址');
            }
            
            // 打开加载动画
            const index = layer.load(1, {
                shade: [0.1,'#fff']
            });
            
            const xhr = new XMLHttpRequest();
            xhr.open('GET', '/download?file=' + encodeURIComponent(file));
            xhr.send(null);
            // 设置服务端的响应类型
            xhr.responseType = "blob";
            // 监听下载
            xhr.addEventListener('progress', event => {
                // 计算出百分比
                const percent  = ((event.loaded / event.total) * 100).toFixed(2);
                console.log(`下载进度：${percent}`);
            }, false);
            xhr.onreadystatechange = event => {
                if(xhr.readyState == 4){
                    if (xhr.status == 200){
                        
                        // 获取ContentType
                        const contentType = xhr.getResponseHeader('Content-Type');
                        
                        // 文件名称
                        const fileName = xhr.getResponseHeader('Content-Disposition').split(';')[1].split('=')[1];
                        
                        // 创建一个a标签用于下载
                        const donwLoadLink = document.createElement('a');
                        donwLoadLink.download = fileName;
                        donwLoadLink.href = URL.createObjectURL(xhr.response);
                        
                        // 触发下载事件，IO到磁盘
                        donwLoadLink.click();
                        
                        // 释放内存中的资源
                        URL.revokeObjectURL(donwLoadLink.href);
                        
                        // 关闭加载动画
                        layer.close(index);
                    } else if (response.status == 404){
                        alert(`文件：${file} 不存在`);
                    } else if (response.status == 500){
                        alert('系统异常');
                    }
                }
            }
        }
    </script>
</html>

现在的ajax请求，几乎都是用ES6的fetch，支持异步，而且代码也更优雅。API设计得更合理。但是目前为止，好像fetch并没有progress事件，也就说它不支持监听上传下载的进度。所以没辙，还是得用XMLHttpRequest。