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

文件下载方法

如果从后台服务中可以获取文件的下载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)
    }