Ajax-Asynchron-Download-Datei

Dieses Mal werde ich Ihnen das asynchrone Herunterladen von Dateien mit Ajax vorstellen. Was sind die Vorsichtsmaßnahmen für das asynchrone Herunterladen von Dateien mit Ajax? Das Folgende ist ein praktischer Fall.

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

Anforderungen

Der Managementhintergrund muss jederzeit Datenberichte herunterladen, und die Daten müssen in Echtzeit generiert und dann zum Herunterladen in Excel konvertiert werden.

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).

Methode 1

Die Schnittstelle zum Anfordern von Dateien kann in GET geändert werden. Sie können diese Methode

<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>

verwenden oder sie auf eine andere Art und Weise ändern und js verwenden, um dynamisch eine zu erstellen Tag

<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()
 }

Nachteile

Sie können die Post-Methode nicht verwenden

Sie können die Schaltfläche beim Starten des Downloads nicht deaktivieren und aktivieren Die Schaltfläche, nachdem der Download abgeschlossen ist

Methode 2

Viele Leute sprechen über die erste Methode. Die Methode kann zufrieden sein

Konventionell Methode, verwenden Sie jquery:

<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()
  })
}

Auf diese Weise gespeicherte Dateien können nicht geöffnet werden. Console.log(typeof(data)) erkennt, dass es sich um einen Zeichenfolgentyp handelt. Der Grund dafür ist, dass jquery die zurückgegebenen Daten in Zeichenfolgen umwandelt unterstützt den Blob-Typ nicht.

Der richtige Weg

<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()
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Informationen zahlen Sie bitte Beachten Sie auch andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Ajax implementiert eine hochsichere Anmeldeschnittstelle

Detaillierte Erläuterung der Schritte zur Verwendung von Ajax für Form Formulareinreichung

Das obige ist der detaillierte Inhalt vonAjax-Asynchron-Download-Datei. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!