后端返回文件流文件下载

Yaince

于 2022-08-18 15:47:13 发布

阅读量239

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/Yaince/article/details/126407124

这段代码展示了如何使用axios从接口获取文件流，并将其转换为blob对象以便于下载。通过设置responseType为'blob'，然后创建一个新的blob对象，再利用URL.createObjectURL生成下载链接，最后模拟点击实现文件下载。如果下载失败，则显示错误信息。

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

要对返回的数据进行文件流解析文件流将会被转成blob对象

async handleDownLoad(file) {
    axios
      .request({
        url: '接口地址',
        method: 'get',
        responseType: 'blob', //文件流将会被转成blob对象
        params //接口参数
      })
      .then(res => {
        if (res.data) {
          let blob = new Blob([res.data])
          let url = window.URL.createObjectURL(blob)
          let aLink = document.createElement('a')
          aLink.style.display = 'none'
          aLink.href = url
          aLink.setAttribute('download', file.name)
          document.body.appendChild(aLink)
          aLink.click()
          document.body.removeChild(aLink)
          window.URL.revokeObjectURL(url)
        } else {
          this.$message({ type: 'error', message: '获取下载文件失败' })
        }
      })
  }