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

vue经验 专栏收录该内容
5 篇文章 0 订阅

文件下载方法

如果从后台服务中可以获取文件的下载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)
    }
  • 0
    点赞
  • 0
    评论
  • 3
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页

打赏作者

我是鱼和海鸟的孩子

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值