前端调取接口下载 excel,获取 blob 触发 a 链接 下载过慢,如何解决?

Question

前端调取接口获取 blob 触发 a 链接 下载 excel过慢
项目中,因为excel文件过大
导致后端调取接口时间过长,用户长时间等待后,才触发 a 链接的下载弹窗
有没有什么方案能先触发弹窗,再在后台运行下载?
大致代码如下

axios({
    method,
    url,
    responseType: 'blob',
})
.then(res => {
    const blob = new Blob([res.data], {
          type: 'application/vnd.ms-excel;charset=utf-8'
    }) // 创建一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象
      const link = document.createElement('a') // 创建一个a标签
    link.download = 'xxx' // 设置a标签的下载属性
    link.style.display = 'none' // 将a标签设置为隐藏
    link.href = URL.createObjectURL(blob) // 把之前处理好的地址赋给a标签的href
    document.body.appendChild(link) // 将a标签添加到body中
    link.click() // 执行a标签的点击方法
    URL.revokeObjectURL(link.href) // 下载完成释放URL 对象
    document.body.removeChild(link) // 移除a标签
})

Answer 1

1. 点击之后，先改变界面，比如弹出一个窗体，显示“下载中……”。
2. 然后再去请求数据
3. 拿到数据之后，触发真正的下载