如何通过JavaScript调用REST接口实现文件下载并控制等待条？

我之前也遇到过一模一样的问题——用a标签能正常下载但没法控制加载状态，用普通Ajax又触发不了浏览器的下载行为。核心原因是Ajax默认只会接收响应内容，不会主动触发浏览器的下载流程，而a标签是直接让浏览器处理整个请求，我们没法介入监听状态。下面给你两个靠谱的解决思路，亲测好用：

方案1：Blob + 动态创建a标签（推荐） #

这个方法通过XMLHttpRequest/fetch获取文件的Blob数据，手动创建下载链接触发下载，同时可以完美监听请求的开始和结束来控制等待条。

jQuery版本代码示例 #

$('#downloadBtn').click(function() {
    // 显示等待条
    $('#loadingBar').show();

    $.ajax({
        url: '/your-download-api', // 替换成你的接口地址
        method: 'GET', // 如果是POST请求，改成POST并添加data参数
        xhrFields: {
            responseType: 'blob' // 关键：告诉XHR要接收Blob类型的响应
        },
        success: function(blob, status, xhr) {
            // 从响应头里解析文件名（后端要设置Content-Disposition头）
            const disposition = xhr.getResponseHeader('Content-Disposition');
            let filename = '默认文件名';
            if (disposition) {
                const filenameMatch = disposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
                if (filenameMatch?.[1]) {
                    filename = decodeURIComponent(filenameMatch[1].replace(/['"]/g, ''));
                }
            }

            // 创建临时下载链接并触发点击
            const blobUrl = window.URL.createObjectURL(blob);
            const $a = $('<a>').attr({
                href: blobUrl,
                download: filename
            }).appendTo('body');
            $a[0].click(); // 必须触发原生click事件

            // 清理资源
            window.URL.revokeObjectURL(blobUrl);
            $a.remove();
        },
        error: function() {
            alert('下载失败，请稍后重试');
        },
        complete: function() {
            // 不管成功失败，都隐藏等待条
            $('#loadingBar').hide();
        }
    });
});

原生JS（Fetch API）版本（更简洁） #

document.getElementById('downloadBtn').addEventListener('click', async () => {
    const loadingBar = document.getElementById('loadingBar');
    loadingBar.style.display = 'block';

    try {
        const response = await fetch('/your-download-api');
        if (!response.ok) throw new Error('请求失败');
        
        const blob = await response.blob();
        const blobUrl = window.URL.createObjectURL(blob);
        
        // 解析文件名
        const disposition = response.headers.get('Content-Disposition');
        let filename = '默认文件名';
        if (disposition) {
            const filenameMatch = disposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
            filename = filenameMatch?.[1] ? decodeURIComponent(filenameMatch[1].replace(/['"]/g, '')) : filename;
        }

        // 创建临时a标签
        const a = document.createElement('a');
        a.href = blobUrl;
        a.download = filename;
        document.body.appendChild(a);
        a.click();

        // 清理
        window.URL.revokeObjectURL(blobUrl);
        document.body.removeChild(a);
    } catch (err) {
        alert(err.message);
    } finally {
        loadingBar.style.display = 'none';
    }
});

方案2：动态创建iframe监听加载状态 #

如果不想处理Blob，也可以用iframe来承载下载请求，通过监听iframe的load事件来隐藏等待条：

$('#downloadBtn').click(function() {
    $('#loadingBar').show();
    
    // 创建隐藏的iframe
    const $iframe = $('<iframe>', {
        src: '/your-download-api',
        style: 'display:none'
    }).appendTo('body');

    // 监听iframe加载完成（不管成功失败）
    $iframe.on('load', function() {
        $('#loadingBar').hide();
        // 清理iframe
        setTimeout(() => $iframe.remove(), 1000);
    });
});

这个方法的缺点是：如果后端返回错误（比如500），iframe会加载错误页面，可能会有控制台报错；而且没法直接获取文件名，只能依赖后端设置的Content-Disposition让浏览器自动处理。

后端需要配合的点 #

不管用哪个方案，后端都要正确设置响应头：

// 设置文件类型，比如Excel是application/vnd.ms-excel，PDF是application/pdf
response.setContentType("application/vnd.ms-excel");
// 设置下载文件名，让浏览器识别为附件下载
response.setHeader("Content-Disposition", "attachment; filename=\"导出文件.xlsx\"");
// 把生成的文件流写入response.getOutputStream()

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