axios实现下载

axios实现下载功能

背景：从前不使用前端框架（Angular、React、Vue）开发是，直接请求个url，或者提交个post表单就可以完成下。那如何在在使用了前端框架下，且使用axios下载文件呢

百度上找了一些资料，亲自测试过，有些方案有坑，这里特意记下来，免得大家再踩坑。

1、方案一：直接原生javascript（方案有坑）

对于前端，没有什么是原生javascript不能解决的

let formElement = document.createElement('form'); 
formElement.style.display = "display:none;"; 
formElement.method = 'post'; 
formElement.action = ${apiBasePath}/api/xxxxx/downloadDetailData; 
formElement.target = 'callBackTarget'; 
formElemet.enctype = 'application/json';
let inputElement = document.createElement('input'); 
inputElement.type = 'hidden'; 
inputElement.name = "params" ; 
inputElement.value = params; 
formElement.appendChild(inputElement); 
document.body.appendChild(formElement); 
formElement.submit(); 
document.body.removeChild(formElement)

上面的代码在测试时，出现坑了，因为后端需要前端提交的请求数据类型应为application/json 但是，据说w3c已经废弃表单对数据编码application/json的支持，即<form enctype="application/json"> 是无效的。

所以，上面代码设置enctype = 'application/json' 自然无效，提交后，发现还是请求的数据类型还是变回application/x-www-form-urlencoded ，所有被后端无情拒绝请求。

2、方案二：axios解决

这是主角，直接上代码，亲测可用

this.axios
        .post(this.baseUrl+"/exportUser", { admin: "",keys: "",keyword:this.keyword,},{responseType: 'blob'})
        .then(function(response) {
          var blob = new Blob([response.data])
          var downloadElement = document.createElement('a');
      　　var href = window.URL.createObjectURL(blob); //创建下载的链接
      　　downloadElement.href = href;
      　　downloadElement.download = '用户数据.xlsx'; //下载后文件名
      　　document.body.appendChild(downloadElement);
      　　downloadElement.click(); //点击下载
      　　document.body.removeChild(downloadElement); //下载完成移除元素
      　　window.URL.revokeObjectURL(href); //释放掉blob对象 
          
          console.log(response);
        })
        .catch(function(error) {
          console.log(error);