使用axios获取blob实现文件下载

本文介绍了一种使用Button代替A标签实现文件下载的方法,通过axios获取blob数据,创建URL对象并触发点击事件,确保下载文件保持原始文件名。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

文件下载方法

如果从后台服务中可以获取文件的下载url,那么在页面中要实现文件下载,直接使用<a> 标签

<a href="url">文件下载</a>

但是这种方法下载的文件名称是一串字符串,并不是文件本身的名字。为了实现所下载的文件其名字是它本身的文件名,下面介绍一种使用<button> 的方法

使用axios获取blob

async downLoadByUrl(url) {
      const res = await axios({ url, responseType: 'blob' })
      return res.data
}

创建URL对象并点击a标签

export async function downloadFile(url, name, aElement, that) {
  let downloadUrl = null
  const blob = await that.downLoadByUrl(url)
  const URL = window.URL || window.webkitURL
  downloadUrl && URL.revokeObjectURL(downloadUrl)
  downloadUrl = URL.createObjectURL(blob)
  aElement.download = name
  aElement.href = downloadUrl
  aElement.click()
  aElement = null
}

button点击事件触发

    async download(url, name) {
      const a = document.createElement('a')
      downloadFile(url, name, a, this)
    }
### 正确配置 Axios 接收 Blob 类型文件 为了确保 Axios 能够正确接收并处理 `Blob` 类型的响应,而不是返回 `undefined`,需要特别设置请求头以及指定响应的数据类型。具体实现如下: 当发送请求时,应该通过 `responseType` 参数来指明期望服务器返回的是二进制大对象(即 `blob`)。这可以通过在发起请求前设定 Axios 的默认配置或是在单次请求中显式声明来完成。 对于全局配置而言,在创建 Axios 实例的时候可以这样操作[^1]: ```javascript const instance = axios.create({ responseType: 'blob' // 明确指出希望接收到 blob 数据 }); ``` 而在单独的一次请求里,则可以在调用方法时传递此选项作为参数的一部分[^2]: ```javascript axios.get('/api/file', { responseType: 'blob' }).then((response) => { console.log(response.data); }) .catch((error) => { console.error('There was an error!', error); }); ``` 另外,考虑到某些情况下服务端可能会附带特定的内容编码信息于 HTTP 响应头部字段之中,因此还需要检查这些元数据以便更精确地解析所获取到的信息。例如,如果预期中的 MIME 类型为 `application/octet-stream;charset=utf-8` ,那么应当验证实际获得的 Content-Type 是否匹配,并据此采取相应的措施: ```javascript if (headers['content-type'] === 'application/octet-stream;charset=utf-8') { return new Blob([response.data], { type: headers['content-type'] }); } ``` 综上所述,要成功利用 Axios 获取 Blob 文件而不遇到 undefined 错误的关键在于适当调整客户端发出请求的方式——主要是定义好合适的 `responseType` 属性;同时也需注意依据实际情况灵活运用来自服务器端反馈的各种提示来进行进一步加工处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值