前端 利用 xhr 做下载 例如 ( xlsx . doxc ) 文件

GEt 请求方式  :

 let xhr = new XMLHttpRequest()

      let formData = new FormData()

      xhr.open('get', this.baseUrl + 'XXXXXXXXX'')  //你的下载地址

      xhr.setRequestHeader( 'Authorization', sessionStorage.getItem('token') )

      xhr.setRequestHeader("Content-type","application/json; charset=utf-8")

      xhr.responseType = 'blob'

      xhr.onload = function (e) {

        if (e.currentTarget.status == 200) {

          let blob = this.response

          let filename = '导入模板.xlsx'

          if (window.navigator.msSaveOrOpenBlob) {

            navigator.msSaveBlob(blob, filename)

          } else {

            let a = document.createElement('a')

            let url = window.URL.createObjectURL(blob)

            a.href = url

            a.download = filename

            document.body.appendChild(a)

            a.click()

            window.URL.revokeObjectURL(url)

          }

        }

      }

      xhr.send()

===============================   注意点 ==============

后记 ========20201222======
如果 get请求是带参数的 拼接到 地址后面

 let copyquer = JSON.parse(JSON.stringify(this.query))

  //   let p = utilCRM.objToString(copyquer)  //

xhr.open('get', this.baseUrl + 'XXXXXXXXX''+p)  

 

utilCRM.objToString = function(param){

    var paramStr="";

    for(let key  in param){

        if (param[key]!=null && param[key]!=undefined ){

            paramStr+="&"+key+"="+param[key];

        }

        // paramStr+="&"+key+"="+encodeURIComponent(param);

    }

    return paramStr.substr(1);

};

 

 

上面的是方法哦~~

 xhr.setRequestHeader( 'Authorization', sessionStorage.getItem('token') )    //如果需要token 

 xhr.setRequestHeader("Content-type","application/json; charset=utf-8")    //这里也是重点,将  setRequestHeader 设置为 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 xhr.setRequestHeader("Content-type","application/json; charset=utf-8")

  xhr.send()  　　　　　　　　　　　　　　　　　　　　　　　　　　// 这里 如果是get 请求 就是xhr.send()  就是 空(  ) 或者 null

 

--------------------------------------将以上代码写在方法里就好-------------------------------------------

 

  POST 请求方式

 

　　　　let obj = {

　　　　　　a:1,
　　　　　　b:2

　　　　}

　　    let aaa = {

　　　　　　data : JSON.stringify( obj ),

　　　　　　type : 'Day'

　　　}

 

 

                var xhr = new XMLHttpRequest();　

  　　　   var formData = new FormData()     //创建form表单

　　　　 

　　　　 formData.append('data', aaa.data)   //将内容放入表单中

         　   formData.append('type', aaa.type)  //将内容放入表单中

　　　　　　console.log(formData.get('type'), ormData.get('data') )   //可以打印出来看看

                xhr.open('post',this.baseUrl+'XXXXXXXX');  //这里是你的下载地址   

                xhr.setRequestHeader("Authorization",('Bearer '+ sessionStorage.getItem('newToken')));  //比如这里就是新的token

                xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");  //格式

                xhr.responseType = 'blob';

                xhr.onload = function (e) {

                    if (e.currentTarget.status == 200) {

                        var blob = this.response;

                        var filename = "XXXXX.xlsx";      //命名下载的文件名

                        if (window.navigator.msSaveOrOpenBlob) {

                            navigator.msSaveBlob(blob, filename);

                        } else {

                            var a = document.createElement('a');

                            var url = window.URL.createObjectURL(blob);

                            a.href = url;

                            a.download = filename;

                            document.body.appendChild(a);

                            a.click();

                            window.URL.revokeObjectURL(url);

                        }

                    }

                };

                xhr.send(formData);

 

==================================注意点 ==================

post 请求 要将 通过 append的方式,将内容放入你创建的 new FormData() 里例如 这里的 formData 

 

 xhr.send(formData);   然后 这样放在 send 中

 

========================待优化的地方还有很多.欢迎指出~~~=================