Einfache Möglichkeit, Dateien asynchron mit Ajax herunterzuladen

Der Managementhintergrund muss jederzeit Datenberichte herunterladen, und die Daten müssen in Echtzeit generiert und dann zum Herunterladen in Excel konvertiert werden. Wie kann dieses Problem gelöst werden? Der unten stehende Editor stellt Ihnen eine einfache Methode zur Verarbeitung von Ajax-Anfrage-Binärströmen vor (Ajax-Asynchron-Download von Dateien). Ich hoffe, sie kann Ihnen helfen.

Zusammenfassung: Ajax fordert einen Binärstream (Datei) an, konvertiert ihn zur Verarbeitung oder zum Herunterladen in Blob und speichert die Datei

Anforderungen

Der Verwaltungshintergrund muss Datenberichte herunterladen jederzeit und die Daten müssen in Echtzeit vorliegen. Nach der Generierung werden sie zum Herunterladen in Excel konvertiert.

Die Datei ist nicht groß und die Schaltfläche „Exportieren“ wird auf der Seite platziert. Nach dem Klicken auf die Schaltfläche wird ein Dialogfeld zum Speichern der Datei angezeigt.

Erklärung: Die erste Methode kann Durch die Verwendung des a-Tags werden die Anforderungen der meisten Menschen direkt erfüllt. Bei den beiden Methoden geht es lediglich um Implementierungsmethoden und eine bessere Betriebserfahrung. Sie sind nicht erforderlich (um ein Beispiel zu nennen, das die zweite Methode erfordert: Wenn die Generierung sehr langsam ist, benötigen Sie um die Schaltfläche während des Generierungsprozesses zu deaktivieren, um eine kontinuierliche Generierung zu verhindern). Anfordernde Dateien können in GET geändert werden. Sie können diese Methode verwenden

oder in eine andere ändern. Methode: Verwenden Sie js, um ein Tag dynamisch zu erstellen

Nachteile

<a class="btn btn-primary btn-xs" download="data.xlsx" href="download/?filename=aaa.txt" rel="external nofollow" ><i class="fa fa-share-square-o fa-lg"></i> 导出</a>

Die Post-Methode kann nicht verwendet werden

Die Schaltfläche kann beim Starten des Downloads nicht deaktiviert und nach Abschluss des Downloads nicht aktiviert werden

<button type="button" onclick="download()">导出</button>
function download() {
  var a = document.createElement('a');
  var url = 'download/?filename=aaa.txt';
  var filename = 'data.xlsx';
  a.href=url;
  a.download = filename;
  a.click()
 }

Methode 2

Das sagen viele Leute Die erste Methode ist zufriedenstellend.

Konventionelle Methode, verwenden Sie jquery:

Auf diese Weise speichern Die Datei kann nicht geöffnet werden Der Grund dafür ist, dass jquery die zurückgegebenen Daten in einen String umwandelt und den Blob-Typ nicht unterstützt.

Richtiger Weg

<button type="button" onclick="download()">导出</button>
function download() {
  var url = 'download/?filename=aaa.txt';
  $.get(url, function (data) {
    console.log(typeof(data))
    blob = new Blob([data])
    var a = document.createElement('a');
    a.download = 'data.xlsx';
    a.href=window.URL.createObjectURL(blob)
    a.click()
  })
}

Verwandte Empfehlungen:

Vier Schritte für Ajax zum Senden asynchroner Anfragen

<button type="button" onclick="download()">导出</button>
function download() {
  var url = 'download/?filename=aaa.txt';
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);    // 也可以使用POST方式，根据接口
  xhr.responseType = "blob";  // 返回类型blob
  // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
  xhr.onload = function () {
    // 请求完成
    if (this.status === 200) {
      // 返回200
      var blob = this.response;
      var reader = new FileReader();
      reader.readAsDataURL(blob);  // 转换为base64，可以直接放入a表情href
      reader.onload = function (e) {
        // 转换完成，创建一个a标签用于下载
        var a = document.createElement('a');
        a.download = 'data.xlsx';
        a.href = e.target.result;
        $("body").append(a);  // 修复firefox中无法触发click
        a.click();
        $(a).remove();
      }
    }
  };
  // 发送ajax请求
  xhr.send()
}

Detaillierte Erläuterung des Ajax-Datei-Upload-Plug-Ins zum asynchronen Hochladen

Beispielanalyse der asynchronen JS-Funktionswarteschlangenfunktion

Das obige ist der detaillierte Inhalt vonEinfache Möglichkeit, Dateien asynchron mit Ajax herunterzuladen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!