亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

李義 / 3391人閱讀

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

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

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/105365.html

相關(guān)文章

  • AJAX 之 Promise

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

    microcosm1994 評(píng)論0 收藏0

  • 深入前端-徹底搞懂JS的運(yùn)行機(jī)制

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

    luckyw 評(píng)論0 收藏0

  • 深入前端-徹底搞懂JS的運(yùn)行機(jī)制

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

    jaysun 評(píng)論0 收藏0

  • Web 前端性能分析（一）

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

    Ashin 評(píng)論0 收藏0

  • 深入前端-徹底搞懂瀏覽器運(yùn)行機(jī)制

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

    Youngs 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<