vue接收后端返回的文件流，下载文件（post和get）。前端的集中文件下载方式。大文件下载

后台返回一个File类型（文件流、byte）的数据给前端。

前端请求的时候（建议小文件可以使用blob。大文件使用的时候，在获取文件流需要时间，等待时间会很久）

1、设置返回类型responseType，不管你用post\get\ect都要设置，还有post请求要设置content-type:multipart/from-data（跟文件上传一样，是接收文件的）

2、使用blob类型接收

3、销毁URL对象

//post请求要设置header
axios.post("you api",options,{
            responseType: 'blob',//设置返回类型
          },
          {
             headers:{
                 "content-type":"multipart/from-data",
             }
        }).then((res)=>{
            const link=document.createElement('a');
            try {
              //如果文件类型不确定的时候，可以不设置type
              let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});

              let _fileName = res.headers['content-disposition'].split(';')[1].split('=')
[1];//文件名，中文无法解析的时候会显示 _(下划线),生产环境获取不到
              link.style.display='none';
              // 兼容不同浏览器的URL对象
              const url = window.URL || window.webkitURL || window.moxURL;
              
              link.href=url.createObjectURL(blob);
              link.setAttribute('download', _fileName.substring(_fileName.lastIndexOf('_')+1)));
              document.body.appendChild(link);
              link.click();
              document.body.removeChild(link);
              url.revokeObjectURL(link.href);//销毁url对象
            }catch (e) {
              console.log('下载的文件出错',e)
            }

          }).catch((err)=>{
           console.log('请求出错',err.response.data.error);
          })


//get请求
axios.get("you api",{
            responseType: 'blob',//设置返回类型
          }).then((res)=>{
            const link=document.createElement('a');
            try {
              let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});
              let _fileName = res.headers['content-disposition'].split(';')[1].split('=')[1];//文件名，中文无法解析的时候会显示 _(下划线),生产环境获取不到
              link.style.display='none';
              // 兼容不同浏览器的URL对象
              const url = window.URL || window.webkitURL || window.moxURL;
              
              link.href=url.createObjectURL(blob);
              
     link.setAttribute('download', _fileName.substring(_fileName.lastIndexOf('_')+1)));
              document.body.appendChild(link);
              link.click();
              document.body.removeChild(link);
              url.revokeObjectURL(link.href);//销毁url对象
            }catch (e) {
              console.log('下载的文件出错',e)
            }
  }).catch(()=>{

  })

另外，我发现npm run build之后，前端的获取到的请求头是这样的，没有filename，不能获取到文件名

但浏览器获取到的是完整的。

所以后端的接口中要设置headers下面的属性，就可以获取到文件名了。(这个需要后端设置)

Access-Control-Expose-Headers: Content-Disposition

2、前端的几种文件下载方式

前端vue中实现文件下载的几种方法_小太阳的博客-优快云博客_前端vue实现文件下载，

需要设置token的时候，还是使用responseType:'blob‘方式吧，不要直接用<a>标签。另外要设置header的

3、大文件下载还想用浏览器自带的下载功能时（如下图），放开token ，直接使用<a href="'下载地址'" download="‘设置文件名’"></a>