vue项目中: ①后端返回文件流，axios发送post请求下载文件 ②get(大致思路 没有测试代码)

1、get
①、a链接的href属性
②、window.location.href=url/location.href=url

2、post
axios拦截处理

service.interceptors.response.use((response) => {
    return response     //不返回response.data 是为了后面拿到response.headers
 }, 
 error => {
    return Promise.reject(error)
 }
)

接口设置： responseType: 'blob'很重要

export function creatCertFile (params) {
   return axios.post(url, params, { responseType: 'blob' })
}

请求处理

creatCertFile（params）.then(res => {
      let blob = res
      let reader = new FileReader()
      reader.readAsDataURL(blob)  // 转换为base64，可以直接放入a标签href
      reader.onload = (e) => {
          try {
            // 说明是普通对象数据，后台转换失败
             let msg = JSON.parse(reader.result)
             this.$message.info(msg)
           } catch {
            // 解析成对象失败，说明是正常的文件流
                 if(typeof window.navigator.msSaveBlob !== 'undefined'){
                  //兼容ie
                  window.navigator.msSaveBlob(blob, filename)
                  } else {
                      //转换完成 创建一个a标签用于下载
                      let a = document.createElement('a')
                      a.document = filename
                      a.href = e.target.result
                      document.body.appendChild(a)  //修复firefox中无法触发click
                      a.click()
                      document.body.removeChild(a)
                   }   
           }
      }
})

文件名：filename -> 用res.headers获取
后台需设置Access-Control-Expose-Headers: Content-Disposition因为axios默认取不到content-disposition属性

let contentDisposition = res.headers['content-disposition'];
if (contentDisposition) {
     filename = window.decodeURI(res.headers['content-disposition'].split('=')[1], "UTF-8");
}