前端文件下载-ajax下载完毕回调

前端文件下载 ajax下载完毕回调

公司项目，文件导出，导出的时间段内，希望可以弹出加载中，一直到后台返回文件。
代码及兼容性都比较粗糙，主要是提供个思路。

常规做法

1 a链接的方式 把下载地址给到a标签的href上
2 window.location.href

目标做法

思路

通过下载文件流，前端生成文件。

实现参考

 /**   * ajax方式下载文件   * @param {*} url 必填   * @param {*} fileName 必填 如 "学生学籍卡.rar"    * @param {*} showLoading  非必填   * @param {*} callBack 非必填   */function getFile({ url, fileName, showLoading, callBack }) {    if (!url) return    if (!window.XMLHttpRequest || !window.Blob) {      // 不兼容处理（ie7以下）      window.location.href = url      return    }    const loadingEle = document.getElementById("mainLoading");    if (showLoading && loadingEle) {      // 展示加载中...    }    const xhr = new XMLHttpRequest();    xhr.open("GET", url, true);    xhr.responseType = "blob";       xhr.onload = function () {      if (showLoading && loadingEle) {          // 隐藏加载中..      }      if (callBack) callBack()      var a = document.createElement("a");      a.download = fileName ; // 文件名 含文件格式      a.href = window.URL.createObjectURL(new Blob([xhr.response]));;      document.body.appendChild(a);      a.click();      a.remove()    };    xhr.send();  }

优缺点

优点： 下载可控，可以随时停止下载，修改文件名，显示下载进度，提示等待以及回调 等等
缺点： 性能影响（待定，大文件应该能体现）;格式，后端返回的格式假如不固定该如何处理还没想好；自己封装的问题很多会考虑不周，比如登录超时提示等等；兼容性问题 XMLHttpRequest 以及 Blob这些方法的支持问题。

如果你有一套完善的轮子 请贴上地址或代码 借鉴借鉴！