使用JavaScript下载文件时浏览器不显示进度条，寻求解决方案

你当前的代码是通过XMLHttpRequest先把文件下载到浏览器内存（Blob对象），再触发本地保存，这个过程没有实际的网络下载请求被浏览器的下载管理器捕获，所以不会显示原生进度条。要实现浏览器自带的下载进度条，得让浏览器直接发起下载请求，而非先把文件加载到内存。

方案一：直接触发原生下载（推荐） #

直接创建a标签指向资源地址，让浏览器处理整个下载流程，这样就能显示原生进度条：

function getSound(sound) {
    const link = document.createElement('a');
    link.href = sound;
    link.download = 'sound.mp3';
    link.click();
    // 清理DOM元素
    link.remove();
}

注意事项 #

• 如果资源是跨域的，需要服务器配置CORS响应头（如Access-Control-Allow-Origin），并且返回Content-Disposition: attachment; filename="sound.mp3"头，确保浏览器识别为下载文件。
• 这种方式不需要额外处理进度，浏览器会自动显示下载进度条。

方案二：自定义页面内进度条（若需XHR处理请求） #

如果必须用XMLHttpRequest处理请求（比如需要携带自定义请求头、权限验证），可以监听progress事件实现页面内的进度条，但无法触发浏览器原生下载进度条：

function getSound(sound) {
    const req = new XMLHttpRequest();
    req.open("GET", sound, true);
    req.responseType = "blob";

    // 监听进度事件
    req.addEventListener('progress', function(e) {
        if (e.lengthComputable) {
            const progress = (e.loaded / e.total) * 100;
            // 更新页面内的进度条元素，比如：
            // document.getElementById('progress-bar').style.width = progress + '%';
        }
    });

    req.onload = function (event) {
        const blob = req.response;
        const link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = 'sound.mp3';
        link.click();
        // 释放Blob URL资源
        window.URL.revokeObjectURL(link.href);
    };

    req.send();
}

这种方式需要你自己在页面中添加进度条元素，手动更新进度，浏览器的下载管理器不会显示进度。

内容的提问来源于stack exchange，提问作者Lakmi