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

最新推荐文章于 2024-03-16 00:43:28 发布

今天晚上一定要早睡

最新推荐文章于 2024-03-16 00:43:28 发布

阅读量345

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 ajax javascript

本文链接：https://blog.youkuaiyun.com/qq_48192192/article/details/129545038

该文章介绍了一种前端通过Ajax和Blob对象实现文件下载的方法，允许控制下载过程，显示加载状态，自定义文件名，并处理了兼容性和回调功能。然而，这种方法可能对性能有影响，尤其是在处理大文件时，且需考虑后端返回格式的灵活性和登录超时等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文件导出，导出的时间段内，希望可以弹出加载中，一直到后台返回文件

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

 /**
   * 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 &amp;&amp; loadingEle) {
      // 展示加载中...
    }
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "blob";   
    xhr.onload = function () {
      if (showLoading &amp;&amp; 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这些方法的支持问题。

https://www.ucloud.cn/yun/105365.html