首页 编程

# 原文链接 https://www.jianshu.com/p/1e189c14aa98

# 网络请求
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

function get() {
    var xhr = new XMLHttpRequest();
    var url = "请求地址";
    xhr.open("POST", url);
    xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    xhr.responseType = "blob";
    xhr.addEventListener("loadstart", function (ev) {
        // 开始下载事件：下载进度条的显示
        $("#progress-dialog").modal('show')
    });
    xhr.addEventListener("load", function (ev) {
        // 下载完成事件：处理下载文件
        processRequest(xhr);
    });
    xhr.addEventListener("progress", function(ev) {
        // 下载中事件：计算下载进度
        var max   = ev.total;
        var value = ev.loaded;
        var width = value/max*100;
       
    });
     xhr.addEventListener("loadend", function(ev) {
        // 结束下载事件：下载进度条的关闭
    });
    xhr.addEventListener("error", function(ev) {
      
    });
    xhr.addEventListener("abort", function(ev) {
     
    });

    xhr.send(JSON.stringify({
       //参数
    }));
}



# 下载文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

function processRequest(xhr){
      console.log(xhr)
      if (xhr.status == 200) {
          var response = xhr.response;
          var contentType = xhr.getResponseHeader("Content-Type");
          if(contentType.split(";")[0] == "application/json"){
              var reader = new FileReader();
              reader.readAsText(response);
              reader.onload = function (oFREvent) {
                  // 后端返回的json数据
              };
          } else if (contentType.split(";")[0] == "application/octet-stream"){
              var fileName =  xhr.getResponseHeader("content-disposition").split("=")[1];
              saveFile(response, decodeURI(fileName))
          }
      }else{
          var response = xhr.response;
          var contentType = xhr.getResponseHeader("Content-Type")
          if(contentType.split(";")[0] == "application/json"){
              var reader = new FileReader();
              reader.readAsText(response);
              reader.onload = function (oFREvent) {
                  //请求异常
              };
          }
      }
  }

# 保存文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

function saveFile(blob, fileName) {
      var b = getBrowser();
      if (b == "Chrome") {
          var link = document.createElement('a');
          var file = new Blob([blob], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
          link.href = window.URL.createObjectURL(file);
          link.download = fileName;
          link.click();
      } else if (b == "Firefox") {
          var file = new File([blob], fileName, {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
          var url = URL.createObjectURL(file);
          //window.location.href = url;
          parent.location.href = url;
      } else if (b == "IE") {
          var file = new Blob([blob], {type: 'application/force-download'});
          window.navigator.msSaveBlob(file, fileName);
      }
  }


# 判断浏览器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    
function getBrowser() {
       var ua = window.navigator.userAgent;
       var isIE = !!window.ActiveXObject || "ActiveXObject" in window;
       var isFirefox = ua.indexOf("Firefox") != -1;
       var isOpera = window.opr != undefined;
       var isChrome = ua.indexOf("Chrome") && window.chrome;
       var isSafari = ua.indexOf("Safari") != -1 && ua.indexOf("Version") != -1;
       if (isIE) {
           return "IE";
       } else if (isFirefox) {
           return "Firefox";
       } else if (isOpera) {
           return "Opera";
       } else if (isChrome) {
           return "Chrome";
       } else if (isSafari) {
           return "Safari";
       } else {
           return "Unkown";
       }
   }