前端js使用post请求下载文件流

// html:
<button type="button" onclick="handleDownload()">下载<button>
<script>
function handleDownload() {
// 一、原生js方法
  var xhr = new XMLHttpRequest();
  xhr.open("post", url, true); // url为请求接口连接
  xhr.responseType: 'arraybuffer';// 'blob'或者'arraybuffer'两个值都可以,二选一
  // xhr.responseType = "blob"; // // 'blob'或者'arraybuffer'两个值都可以,二选一
  xhr.setRequestHeader('Accept', 'application/json');
  xhr.setRequestHeader('Authorization', token);
  xhr.onload = function() {
      if (this.status == 200) {
          var blob = this.response;
          if (blob.type == "text/html") {
              console.log("出错了");
          return false;  
          }
          var fileName = fileName; // fileName为文件名称，自己根据实际情况赋值
          if (window.navigator.msSaveOrOpenBlob) { // IE浏览器下
              navigator.msSaveBlob(blob, fileName);
          } else {
              var link = document.createElement("a");
              link.href = window.URL.createObjectURL(blob);
              link.download = fileName;
              link.click();
              window.URL.revokeObjectURL(link.href);
          }
      } else {
          console.log("请求错误!");
      }
   };
   xhr.onloadend = function(res) {};
   xhr.send();

//二、 jQuery+Ajax方案
    $.ajax({
        url: url, // url为请求接口连接
        type: 'post',
        headers: {
            'Accept': 'application/json',
            'Authorization': token
        },
        responseType: 'arraybuffer',  // 该属性只支持jQuery3.5及以上版本，否则下载下来的文件会是乱码
        // responseType: 'blob', // 与上一行一样，'blob'或者'arraybuffer'两个值都可以,二选一
        success: function(res) {
            // console.log(res)
            downloadFile(res, fileName);  // res为后端传来的文件流，// fileName为文件名称，自己根据实际情况赋值
        },
        error: function(res) {
            console.log('失败')
        }
    });
};

// 该方法是创建下载，上面的jQuery的方法接口访问成功后调用，原生js的方法已在自己方法内部定义过该部分内容
function downloadFile(res, fileName) { // res为后端传来的文件流，// fileName为文件名称，自己根据实际情况赋值
    if (!res) {
        return
    };
    if (window.navigator.msSaveBlob) { // IE以及IE内核的浏览器
        try {
            window.navigator.msSaveBlob(res, fileName) // res为接口返回数据，这里请求的时候已经处理了，如果没处理需要在此之前自行处理var data = new Blob([res.data]) 注意这里需要是数组形式的,fileName就是下载之后的文件名
            // window.navigator.msSaveOrOpenBlob(res, fileName);  //此方法类似上面的方法，区别可自行百度
        } catch (e) {
            console.log(e)
        }
    } else {
        let url = window.URL.createObjectURL(new Blob([res], {
            type: 'text/plain;charset=uft-8'; // 前后端一定要同意utf-8编码，否则会是乱码
        }));
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', fileName) // 文件名
    document.body.appendChild(link)
        link.click()
        document.body.removeChild(link) // 下载完成移除元素
        window.URL.revokeObjectURL(url) // 释放掉blob对象
    }
  };
</script>