So implementieren Sie das asynchrone Herunterladen von Dateien mit Ajax

Dieses Mal werde ich Ihnen zeigen, wie Sie das asynchrone Herunterladen von Dateien mit Ajax implementieren. Was sind die Vorsichtsmaßnahmen für das asynchrone Herunterladen von Dateien mit Ajax?

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 verwenden oder sie auf eine andere Art und Weise ändern und js dynamisch verwenden Tag 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

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

Die Schaltfläche kann beim Starten des Downloads nicht deaktiviert werden und aktivieren Sie die Schaltfläche, nachdem der Download abgeschlossen ist

Methode 2

Viele Leute tun dies. Es wird gesagt, dass die erste Methode zufriedenstellend ist. Der falsche Weg ist

Die herkömmliche Methode mit jquery:

Auf diese Weise gespeicherte Dateien können nicht geöffnet werden. console.log(typeof(data) ) erkennt, dass es sich um einen Zeichenfolgentyp handelt Diese JQuery konvertiert die zurückgegebenen Daten in einen String und unterstützt den Blob-Typ nicht.

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

Ich glaube, Sie haben es nach dem Lesen gemeistert Der Fall in dieser Artikelmethode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website! Empfohlene Lektüre:

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

Wie fügt AjaxFileUpload dynamisch eine Datei-Upload-Box hinzu?

Eine praktische Zusammenfassung von Ajax und JSONP in das Projekt

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das asynchrone Herunterladen von Dateien mit Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!