如何使用Flask与JavaScript实现无页面刷新处理并下载Excel文件

核心问题原因 #

你当前触发的浏览器全局刷新动画，是因为使用location.href跳转触发下载属于页面级导航行为，浏览器会默认展示全局加载状态，直到请求返回。

方案1：隐藏iframe实现（最简单，无需修改后端） #

该方案完全复用你现有的Flask路由代码，仅修改前端JS逻辑即可，通过隐藏的iframe独立承载下载请求，主页面不会触发导航状态：

修改后的JS代码 #

let export_button = document.getElementById('export')
// 提前声明下拉框变量，避免运行报错
const project_select = document.getElementById('projects')
const versions_select = document.getElementById('versions')

export_button.onclick = function() {
    // 点击后禁用按钮防止重复提交，提升用户体验
    export_button.disabled = true
    export_button.textContent = '文件处理中...'
    
    const project_index = project_select.value;
    const version_index = versions_select.value;
    
    // 动态创建隐藏iframe承载下载请求
    const downloadIframe = document.createElement('iframe')
    downloadIframe.style.display = 'none'
    downloadIframe.src = `/${project_index}/${version_index}`
    document.body.appendChild(downloadIframe)
    
    // 监听请求完成后重置按钮状态、清理DOM
    downloadIframe.onload = function() {
        document.body.removeChild(downloadIframe)
        export_button.disabled = false
        export_button.textContent = 'Export'
    }
}

这个方案的优势是浏览器会在拿到下载响应头后立刻触发保存，无需等待整个文件加载完成，更适合大文件/处理耗时久的场景。

方案2：AJAX/Fetch实现（支持更灵活的错误处理） #

如果需要捕获导出过程中的错误（比如参数错误、后端处理失败），可以用Fetch API实现，后端代码也无需修改：

对应JS代码 #

let export_button = document.getElementById('export')
const project_select = document.getElementById('projects')
const versions_select = document.getElementById('versions')

export_button.onclick = async function() {
    export_button.disabled = true
    export_button.textContent = '文件处理中...'
    
    const project_index = project_select.value;
    const version_index = versions_select.value;
    
    try {
        const response = await fetch(`/${project_index}/${version_index}`)
        if (!response.ok) throw new Error('导出请求失败')
        // 把响应转为二进制Blob对象
        const fileBlob = await response.blob()
        // 生成临时下载链接
        const downloadUrl = window.URL.createObjectURL(fileBlob)
        const downloadLink = document.createElement('a')
        downloadLink.href = downloadUrl
        downloadLink.download = 'testing.xlsx'
        document.body.appendChild(downloadLink)
        // 模拟点击触发下载
        downloadLink.click()
        // 清理临时资源
        window.URL.revokeObjectURL(downloadUrl)
        document.body.removeChild(downloadLink)
    } catch (error) {
        alert('文件导出失败，请检查参数后重试')
    } finally {
        // 无论成功失败都重置按钮状态
        export_button.disabled = false
        export_button.textContent = 'Export'
    }
}

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