JS原生方法XMLHttpRequest实现点击下载XML 文件

学习目标：

如果不做点笔记，估计几年之后就忘记自己曾经是干神马的了

---

封装一个可供使用的方法吧，更多功能可自行扩展，下面展示一些 内联代码片。

/**
 *
 * @param {*} url URL地址
 * @param {*} params 请求参数
 * @param {*} method  //请类型 get post
 * @param {*} callBack //执行成功后的回调
 */
 downLoadXml(  url,params= null,  method = 'get',token,callBack){
   //get 平接url参数
     if (method == 'get' && params!= null) 
      for (key in params) {
        if (url.indexOf('?') != -1) {
          url += '&' + params[key];
        } else {
          url += '?' + params[key];
        }
      }
     }
     let xhr = new XMLHttpRequest();
     xhr.open(method , url);
     // 设置请求头
     xhr.setRequestHeader('X-Access-Token', token);
     xhr.setRequestHeader("Content-Type", 'application/json;charset=utf-8');
     xhr.responseType = 'blob';
     xhr.onload = function (e) {
       // 请求成功
       if (this.status == 200) {
       let blob = this.response;
       let a = document.createElement('a');
       //window.URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
       let url = window.URL.createObjectURL(blob);
       a.href = url;
       //获取后端文件名称
       let fileName = decodeURI(xhr.getResponseHeader('content-disposition'));
       console.log(fileName)
       let str = fileName.match(/=(\S*)/)[1];
       console.log(str)
       a.download = str;
       a.click();
       //URL.revokeObjectURL() 静态方法用来释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。当你结束使用某个 URL 对象之后，应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。
       window.URL.revokeObjectURL(url); 
       if (callBack) {
          callBack(true);
       }
    }else {
       //下载失败处理
       if (callBack) {
          callBack(false)
       }
    }
  };
   //参数是json格式
   let formData = new FormData();
    //post 转换数据
   if (method == 'post') {
      if (typeof params== 'object') {
        Object.keys(params).forEach(key => {
          formData.append(key, params[key]);
        });
        xhr.send(formData);
      } else {
        //参数为字符串格式
        xhr.send(params);
      }
    } else {
      xhr.send();
   }
}

window.URL.createObjectURL() 和 window.url.revokeObjectURL 下载文档的实现的核心吧，更多说明可参考： https://developer.mozilla.org/zh-CN/docs/Web/API/URL/revokeObjectURL.