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

前端调取接口获取 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标签
})
阅读 474
avatarAI BotBETA

你可以使用 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 数据。

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