vue+axios实现文件下载

首先后端要返回的数据格式为文件流的形式

响应头为:

Content-Type:application/octet-stream

这是请求后端返回的信息:

 

前端axios请求:

// 下载模板
const exportAlterExcelTemplate = () => {
  return _ajax({
    url: '/admin/vocabulary_manager/export_alter_excel_template',
    responseType: 'blob',// 这个必须设置为blob,否则axios默认数据格式返回的为json
    isDownload: true // 这个是因为我在响应拦截器中配置了返回response.data,如果这个字段是true,就直接返回response,因为后端直接返回的一个文件流,这里就是一个blob对象
  })
}

页面调用api:

    async downloadTemplate () {
      const res = await exportAlterExcelTemplate()
      this.download(res)// 封装的下载方法,抽取到混入中,每个下载的地方就都能导入使用了
    }

下载方法:

export default {
  methods: {
    // 传入后端返回的res即可
    download (res) {
      // 获取文件的文件名
      const fileName = res.headers['content-disposition'].substring(
        res.headers['content-disposition'].indexOf('filename=') + 9,
        res.headers['content-disposition'].length
      )
      // 判断当前浏览器的a标签是否支持下载
      if ('download' in document.createElement('a')) {
        // 如果支持就创建a标签
        const downloadLink = document.createElement('a')
        // 为blob对象创建一个本地URL
        const url = window.URL.createObjectURL(res.data)
        // 将url赋值给其href属性
        downloadLink.href = url
        // 将文件名给到download属性
        downloadLink.setAttribute('download', fileName)
        // 将a标签添加到文档中
        document.body.appendChild(downloadLink)
        // 点击下载文件
        downloadLink.click()
        // 从文档中移除a标签
        document.body.removeChild(downloadLink)
      } else {
        // 如果浏览器不支持download属性,兼容ie
        window.navigator.msSaveBlob(res.data, fileName)
      }
    }
  }
}

这样就会自动弹出下载文件框让你保存啦~因为博主后端老板作死接口必须全部用post请求  所以很无语 只能这么绕个弯,不然get请求a标签就能直接下载,但是兼容不了ie,a标签下载的方法:

<a :href="get请求的url" download="您的文件名,可写可不写,不写就使用默认的文件名">下载实例</a>

一个链接就完事儿了,a标签自带下载功能