前端调取接口下载 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. 拿到数据之后，触发真正的下载

Answer 2

你可以使用 JavaScript 的 fetch API 来异步获取数据，然后在数据准备好之后触发下载。这样可以避免用户长时间等待后，才触发 a 链接的下载弹窗。具体来说，你可以这样做：

1. 发送异步请求到后端接口获取 Excel 数据。
2. 使用 fetch API 发送异步请求。
3. 当请求成功后，使用 URL.createObjectURL 创建一个 blob URL，然后设置给隐藏的 a 标签的 href 属性。
4. 触发 a 标签的点击事件以开始下载。
5. 使用 URL.revokeObjectURL 释放 blob URL。

示例代码如下：

fetch(url, { responseType: 'blob' })  .then(response => {    if (!response.ok) {      throw new Error(`HTTP error! status: ${response.status}`);    }    return response.blob();  })  .then(blob => {    const url = window.URL.createObjectURL(blob);    const link = document.createElement('a');    link.href = url;    link.download = 'filename.xlsx'; // 设置下载的文件名    document.body.appendChild(link);    link.click();    window.URL.revokeObjectURL(url);  })  .catch(error => console.error('Error:', error)); // 处理网络错误或 HTTP 状态错误

请注意，此代码需要支持 fetch 和 blob 的浏览器环境。另外，你需要确保后端接口返回正确的 HTTP 状态码和 blob 数据。