VUE 后台返回文件流，前端实现模板下载

前端拿到后台的文件流

1. 点击事件

<el-button type="primary" plain size="mini" @click="handleDown">模板下载</el-button>

2. 在methods中填写事件函数

handleDown () {
      getDlown()
        .then((response) => {
          const link = document.createElement('a') // 创建a标签
          const blob = new Blob([response], {
            type: 'application/vnd.ms-excel'
          }) // response就是接口返回的文件流
          const objectUrl = URL.createObjectURL(blob)
          link.href = objectUrl
          link.download = '用户批量导入模板' + '.xlsx' // 自定义文件名
          link.click() // 下载文件
          URL.revokeObjectURL(objectUrl) // 释放内存
        })
        .catch((error) => {
          console.log(error, '失败的回调')
        })
 }

3. 需要用到getDlown接口

/**
 * 模板下载
 * @params {} null
 * @returns
 */
export function getDlown () {
  return request({
    url: '/sys/user/downUserTemplate',
    method: 'get',
    responseType: 'blob' //这个一定要写，不然识别不出来
  })
}

4. 在这个时候会有一个坑，那就是请求头的Content-type可能不匹配，这个需要在axios请求封装文件内修改一下，这个里边我们只需要把上面方法内的blob的type匹配就可以，如果不写这个会出现一个缺陷，那就是我们方法内的.then()内部的函数不执行，只执行.catch()内部的错误，所以在axios内一定要修改，这样就执行.then()内部的数据了。

if (response.headers['content-type'] === 'application/octet-stream;charset=utf-8' || response.headers['content-type'] === 'multipart/form-data;charset=utf-8' || response.headers['content-type'] === 'application/vnd.ms-excel;charset=utf-8') {
      return res
}