In einem Artikel wird ausführlich erläutert, wie Sie den Dateistream zum Herunterladen von CSV-Dateien in JS verwenden

Dieser Artikel vermittelt Ihnen relevantes Wissen über js+csv. Er stellt vor allem vor, was ein Blob-Objekt ist, wie man es versteht und wie man Dateistreams zum Herunterladen von csv-Dateien verwendet hilft allen.

So implementieren Sie js, um CSV-Dateien mithilfe des Dateistreams herunterzuladen

Das Blob-Objekt verstehen

Bevor das Blob-Objekt erschien, gab es keine bessere Möglichkeit, Binärdateien in JavaScript zu verarbeiten. Seit dem Blob eingeführt wurde, können wir damit Binärdaten verarbeiten.

Jetzt beginnen wir, das Bolb-Objekt und sein Anwendungsszenario für den Dateistream-Download zu verstehen. Schauen wir uns ohne weitere Umschweife die detaillierte Einführung an dataArray: Es handelt sich um ein Array, das die Daten enthält, die dem Blob-Objekt hinzugefügt werden sollen. Arrays können binäre Objekte oder Strings sein.

Optionen sind optionale Objektparameter, die zum Festlegen des MIME-Typs der Daten im Array verwendet werden.
Erstellen Sie ein Blob-Objekt des DOMString-Objekts. Der folgende Code:

var blob = new Blob(dataArray, options);

Verstehen Sie das URL.createObjectURL-Objekt
window-Objekt Das URL-Objekt wird verwendet, um den Blob oder die Datei in eine URL einzulesen.

 var str = "<div>Hello World</div>";
 var blob = new Blob([str], {type: &#39;text/xml&#39;});
 console.log(blob); // 输出：Blob {size: 22, type: "text/xml"}

Zum Beispiel kombiniere ich jetzt das obige Blob-Objekt, um eine einfache Demo einer URL zu generieren. Die tatsächliche Spalte lautet wie folgt:

•  window.URL.createObjectURL(file / blob);

  Der erste gedruckte Blob-Variablenwert im obigen Code lautet wie folgt:

      var str = "<div>Hello World</div>";
      var blob = new Blob([str], {type: &#39;.csv, application/vnd.openxmlformats-        officedocument.spreadsheetml.sheet, application/vnd.ms-excel&#39;});
      console.log(blob);
      const url3 = window.URL.createObjectURL(blob);
      console.log(url3);

Die zweiten URL3-Variablenwertinformationen werden wie folgt gedruckt:

  Blob {size: 22, type: ".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"}

Verstehen Sie das Download-Attribut des a-Tags in HTML5

HTMl5 hat dem a-Tag ein Download-Attribut hinzugefügt. Solange wir den Attributwert festlegen, Der Browser öffnet beim Klicken auf den Link keinen neuen Link. Stattdessen wird die Datei direkt heruntergeladen und der Dateiname ist der Attributwert des Downloads.

In Kombination mit dieser Funktion können wir also einfach Datei-Streaming implementieren, um Dateien herunterzuladen. Wir erstellen zunächst dynamisch einen a-Link basierend auf dem Originalcode und setzen dann den Stil des a-Tags auf „none“ und den href des Links Das Attribut ist die URL, die wir oben mit window.URL.createObjectURL (blob) generiert haben, und dann legen wir das Download-Attribut eines Links fest. Der Attributwert ist der Dateiname unserer Download-Datei. Zum Schluss lösen Sie die Klickfunktion zum Herunterladen aus. Der folgende Code:

• blob:null/2c75a56e-0104-4572-bc19-391d3bf93d9d

  Empfohlenes Lernen: „

  JavaScript Video Tutorial“

  Das obige ist der detaillierte Inhalt vonIn einem Artikel wird ausführlich erläutert, wie Sie den Dateistream zum Herunterladen von CSV-Dateien in JS verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!