成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端文件下載 ajax下載完畢回調(diào)

李義 / 3310人閱讀

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

前端文件下載 ajax下載完畢回調(diào)

公司項目，文件導(dǎo)出，導(dǎo)出的時間段內(nèi)，希望可以彈出加載中，一直到后臺返回文件。
代碼及兼容性都比較粗糙，主要是提供個思路。

常規(guī)做法 
1  a鏈接的方式 把下載地址給到a標(biāo)簽的href上
2   window.location.href
目標(biāo)做法 思路

通過下載文件流，前端生成文件。

實現(xiàn)參考 
 /**
   * ajax方式下載文件
   * @param {*} url 必填
   * @param {*} fileName 必填 如 "學(xué)生學(xué)籍卡.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();
  }
優(yōu)缺點 
優(yōu)點： 下載可控，可以隨時停止下載，修改文件名，顯示下載進度，提示等待以及回調(diào) 等等
缺點： 性能影響（待定，大文件應(yīng)該能體現(xiàn)）;格式，后端返回的格式假如不固定該如何處理還沒想好；自己封裝的問題很多會考慮不周，比如登錄超時提示等等；兼容性問題 XMLHttpRequest 以及 Blob這些方法的支持問題。

如果你有一套完善的輪子 請貼上地址或代碼 借鑒借鑒！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105365.html

相關(guān)文章

  • AJAX 之 Promise

    摘要：如下用回調(diào)最大的問題是回調(diào)函數(shù)沒有命名規(guī)范，每個開發(fā)者都有自己的風(fēng)格，一旦引用了多個庫，各個庫之間的回調(diào)函數(shù)可能會互相影響，的出現(xiàn)正好解決了這個問題。 AJAX 的所有功能 AJAX 出現(xiàn)之后解決了前后端交互問題，前端也正式走向前臺。AJAX 最核心的8句話 1. let request = new XMLHttpRequest() 2. request.onreadystatecha...

    microcosm1994 評論0 收藏0

  • 深入前端-徹底搞懂JS的運行機制

    摘要：瀏覽器是多進程的詳情看我上篇總結(jié)瀏覽器執(zhí)行機制的文章深入前端徹底搞懂瀏覽器運行機制瀏覽器每打開一個標(biāo)簽頁，就相當(dāng)于創(chuàng)建了一個獨立的瀏覽器進程。執(zhí)行異步操作事件完成，回調(diào)函數(shù)進入。主線程從讀取回調(diào)函數(shù)并執(zhí)行。 最近看了很多關(guān)于JS運行機制的文章，每篇都獲益匪淺，但各有不同，所以在這里對這幾篇文章里說的很精辟的地方做一個總結(jié)，參考文章鏈接見最后。本文博客地址 了解進程和線程 進程是應(yīng)用...

    luckyw 評論0 收藏0

  • 深入前端-徹底搞懂JS的運行機制

    摘要：瀏覽器是多進程的詳情看我上篇總結(jié)瀏覽器執(zhí)行機制的文章深入前端徹底搞懂瀏覽器運行機制瀏覽器每打開一個標(biāo)簽頁，就相當(dāng)于創(chuàng)建了一個獨立的瀏覽器進程。執(zhí)行異步操作事件完成，回調(diào)函數(shù)進入。主線程從讀取回調(diào)函數(shù)并執(zhí)行。 最近看了很多關(guān)于JS運行機制的文章，每篇都獲益匪淺，但各有不同，所以在這里對這幾篇文章里說的很精辟的地方做一個總結(jié)，參考文章鏈接見最后。本文博客地址 了解進程和線程 進程是應(yīng)用...

    jaysun 評論0 收藏0

  • Web 前端性能分析（一）

    摘要：參考鏈接初探監(jiān)控網(wǎng)頁與程序性能使用簡潔的測試網(wǎng)頁加載速度前端性能統(tǒng)計前端性能監(jiān)控起步使用性能快速分析前端性能通過以上幾篇文章，可以對前端性能相關(guān)的概念和有一個整體的認識。但在我們這次的前端性能監(jiān)控方案中，并不將其作為主要的監(jiān)控指標(biāo)。 參考鏈接 初探 performance – 監(jiān)控網(wǎng)頁與程序性能 使用簡潔的 Navigation Timing API 測試網(wǎng)頁加載速度 前端性能統(tǒng)計 ...

    Ashin 評論0 收藏0

  • 深入前端-徹底搞懂瀏覽器運行機制

    摘要：當(dāng)這些異步任務(wù)發(fā)生的時候，它們將會被放入瀏覽器的事件任務(wù)隊列中去，等到運行時執(zhí)行線程空閑時候才會按照隊列先進先出的原則被一一執(zhí)行，但終究還是單線程。 瀏覽器是多進程的 showImg(https://segmentfault.com/img/remote/1460000019706956?w=815&h=517); Browser進程： 瀏覽器的主進程（負責(zé)協(xié)調(diào)、主控），只有一個。 負...

    YPHP 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<