axios实现下载

悠悠 2023-07-25 12:34 25阅读 0赞

### 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);