前端文件下载 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这些方法的支持问题。

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

    原文作者:wzy4072
    原文地址: https://segmentfault.com/a/1190000019682712
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞