Ajax-Anforderungsbinärstrom zur Verarbeitung (asynchrone Ajax-Download-Datei)

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

Anforderungen

Die Der Verwaltungshintergrund muss jederzeit durchgeführt werden. Laden Sie den Datenbericht herunter. 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).

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>

<button type="button" onclick="download()">导出</button>
function download() {
  var a = document.createElement(&#39;a&#39;);
  var url = &#39;download/?filename=aaa.txt&#39;;
  var filename = &#39;data.xlsx&#39;;
  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 istMethode 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 = &#39;download/?filename=aaa.txt&#39;;
  $.get(url, function (data) {
    console.log(typeof(data))
    blob = new Blob([data])
    var a = document.createElement(&#39;a&#39;);
    a.download = &#39;data.xlsx&#39;;
    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 = &#39;download/?filename=aaa.txt&#39;;
  var xhr = new XMLHttpRequest();
  xhr.open(&#39;GET&#39;, 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(&#39;a&#39;);
        a.download = &#39;data.xlsx&#39;;
        a.href = e.target.result;
        $("body").append(a);  // 修复firefox中无法触发click
        a.click();
        $(a).remove();
      }
    }
  };
  // 发送ajax请求
  xhr.send()
}

Das oben Gesagte habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel: Wie das Django-Framework die Ajax-Post-Methode verwendet (grafisches Tutorial)

Über das Problem der Weitergabe von Daten im Hintergrund durch Antwort in Ajax (einschließlich Code, detaillierte Analyse)

Das obige ist der detaillierte Inhalt vonAjax-Anforderungsbinärstrom zur Verarbeitung (asynchrone Ajax-Download-Datei). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!