前端文件下載 ajax下載完畢回調

李義發布于2019-08-23 18:31 / 3285人閱讀

摘要：前端文件下載下載完畢回調公司項目，文件導出，導出的時間段內，希望可以彈出加載中，一直到后臺返回文件。常規做法鏈接的方式把下載地址給到標簽的上目標做法思路通過下載文件流，前端生成文件。如果你有一套完善的輪子請貼上地址或代碼借鑒借鑒

前端文件下載 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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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