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

李义发布于2019-08-23 18:31 / 3284人阅读

摘要：前端文件下载下载完毕回调公司项目，文件导出，导出的时间段内，希望可以弹出加载中，一直到后台返回文件。常规做法链接的方式把下载地址给到标签的上目标做法思路通过下载文件流，前端生成文件。如果你有一套完善的轮子请贴上地址或代码借鉴借鉴

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

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

GPU云服务器云服务器前端下载 ajax回调函数 ajax 取值异步回调 web前端 ajax

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105365.html

AJAX 之 Promise

摘要：如下用回调最大的问题是回调函数没有命名规范，每个开发者都有自己的风格，一旦引用了多个库，各个库之间的回调函数可能会互相影响，的出现正好解决了这个问题。 AJAX 的所有功能 AJAX 出现之后解决了前后端交互问题，前端也正式走向前台。AJAX 最核心的8句话 1. let request = new XMLHttpRequest() 2. request.onreadystatecha...

microcosm1994 2019-08-26 11:55 评论0 收藏0
深入前端-彻底搞懂JS的运行机制

摘要：浏览器是多进程的详情看我上篇总结浏览器执行机制的文章深入前端彻底搞懂浏览器运行机制浏览器每打开一个标签页，就相当于创建了一个独立的浏览器进程。执行异步操作事件完成，回调函数进入。主线程从读取回调函数并执行。最近看了很多关于JS运行机制的文章，每篇都获益匪浅，但各有不同，所以在这里对这几篇文章里说的很精辟的地方做一个总结，参考文章链接见最后。本文博客地址了解进程和线程进程是应用...

luckyw 2019-08-02 15:30 评论0 收藏0
深入前端-彻底搞懂JS的运行机制

摘要：浏览器是多进程的详情看我上篇总结浏览器执行机制的文章深入前端彻底搞懂浏览器运行机制浏览器每打开一个标签页，就相当于创建了一个独立的浏览器进程。执行异步操作事件完成，回调函数进入。主线程从读取回调函数并执行。最近看了很多关于JS运行机制的文章，每篇都获益匪浅，但各有不同，所以在这里对这几篇文章里说的很精辟的地方做一个总结，参考文章链接见最后。本文博客地址了解进程和线程进程是应用...

jaysun 2019-08-23 18:41 评论0 收藏0
Web 前端性能分析（一）

摘要：参考链接初探监控网页与程序性能使用简洁的测试网页加载速度前端性能统计前端性能监控起步使用性能快速分析前端性能通过以上几篇文章，可以对前端性能相关的概念和有一个整体的认识。但在我们这次的前端性能监控方案中，并不将其作为主要的监控指标。参考链接初探 performance – 监控网页与程序性能使用简洁的 Navigation Timing API 测试网页加载速度前端性能统计 ...

Ashin 2019-08-23 16:22 评论0 收藏0
深入前端-彻底搞懂浏览器运行机制

摘要：当这些异步任务发生的时候，它们将会被放入浏览器的事件任务队列中去，等到运行时执行线程空闲时候才会按照队列先进先出的原则被一一执行，但终究还是单线程。浏览器是多进程的 showImg(https://segmentfault.com/img/remote/1460000019706956?w=815&h=517); Browser进程：浏览器的主进程（负责协调、主控），只有一个。负...

YPHP 2019-08-02 15:30 评论0 收藏0