当前位置: 首页 > 知识库问答 >
问题:

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

万志专
2024-02-08

前端调取接口获取 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标签})

共有2个答案

严嘉良
2024-02-08
  1. 点击之后,先改变界面,比如弹出一个窗体,显示“下载中……”。
  2. 然后再去请求数据
  3. 拿到数据之后,触发真正的下载
慕乐语
2024-02-08

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

 类似资料:
  • cmf_get_file_download_url($file, $expires = 3600) 功能 获取文件下载链接 参数 $file: string 文件路径,数据库里保存的相对路径 $expires: int 过期时间,单位 s 返回 string 文件链接

  • X2.2.0新增 sp_get_file_download_url($file,$expires=3600) 功能: 获取文件下载链接 参数: $file: 数据库保存的文件路径 $expires:文件过期时间(七牛) 返回: 类型string,文件下载链接 使用: $url = sp_get_file_download_url('portal/23232.png');

  • cmf_get_file_download_url($file, $expires = 3600) 功能 获取文件下载链接 参数 $file: string 文件路径,数据库里保存的相对路径 $expires: int 过期时间,单位 s 返回 string 文件链接

  • 我可以通过这些代码得到一个链接,它可以成功下载一个文件。

  • axios接口请求下载文件,但是获取不到header信息? 但是接口响应头确实有返回 打印的response的headers中却没有content-disposition

  • 在我实现了一个Android应用程序的解决方案后,发布到web服务器并验证Google Order,然后发布一个下载链接。现在,我正在尝试编写一个应用程序的代码,以读取thankyou.php页面中的链接 该文件是一个“.dat”扩展名,来自某个链接。应用程序应该检索一个新页面中的链接,并让客户下载文件。

  • 本文向大家介绍Java爬虫抓取视频网站下载链接,包括了Java爬虫抓取视频网站下载链接的使用技巧和注意事项,需要的朋友参考一下 本篇文章抓取目标网站的链接的基础上,进一步提高难度,抓取目标页面上我们所需要的内容并保存在数据库中。这里的测试案例选用了一个我常用的电影下载网站(http://www.80s.la/)。本来是想抓取网站上的所有电影的下载链接,后来感觉需要的时间太长,因此改成了抓取2015

  • 问题内容: 我有HTML的基本概念。我想在示例网站中创建下载链接,但是我不知道如何创建它。我该如何链接才能下载文件而不是访问文件? 问题答案: 这个答案已经过时了。现在,我们有了属性。 如果“下载链接”是指要下载文件的链接,请使用 在将下载开始之前,新的浏览器窗口出现。当浏览器发现资源是文件下载时,通常会关闭该窗口。 请注意,浏览器已知的文件类型(例如JPG或GIF图像)通常会在浏览器中打开。