vue使用axios下载文件流

1. 创建一个通用接口文件，如api.js

import Vue from 'vue'
import { axios } from '@/utils/request'
/**
 * 下载文件
 * @param url
 * @param parameter
 * @returns {*}
 */
export function downFile(url,parameter){
  return axios({
    url: url,
    params: parameter,
    method:'get' ,
    responseType: 'blob'
  })
}

2. 页面创建下载方法

import { downFile } from '@/api'
 methods: {
download(record){
 let fileName =record.fileName
 downFile(this.url.download, { id: record.id }).then((res) => {
        let data = res
        if (!data || data.size === 0) {
          this.$message.warning('文件下载失败')
          return
        }
      
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data]), fileName)
        }
        else {
          let url = window.URL.createObjectURL(new Blob([data]))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.download = fileName
          // link.setAttribute('download', fileName)
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link) //下载完成移除元素
          window.URL.revokeObjectURL(url) //释放掉blob对象
        }
        console.log(window.navigator.msSaveBlob)
          console.log(data.size)
      })
    },
},

3.请求接口

其他说明：

后台，我使用的是springboot整合minio的接口。

后台接口实现：直通车