Heim > Artikel > Web-Frontend > Wie erstelle und lade ich CSV-Dateien in JavaScript herunter?

Wie erstelle und lade ich CSV-Dateien in JavaScript herunter?

王林nach vorne: 2023-09-17 08:09:03750Durchsuche

如何在 JavaScript 中创建和下载 CSV 文件？

JavaScript verfügt über leistungsstarke Funktionen zur Bearbeitung verschiedener Daten und zur Verarbeitung von Dateien in verschiedenen Formaten. Manchmal müssen Entwickler Daten mithilfe von CSV-Dateien verarbeiten, während sie Webanwendungen mit JavaScript entwickeln.

Zum Beispiel bauen wir eine E-Commerce-Plattform auf, auf der Benutzer Produkte kaufen und verkaufen können. Darüber hinaus möchten wir Benutzern ermöglichen, Bestelldetails basierend auf einem Zeitraum in eine CSV-Datei herunterzuladen. In diesem Fall müssen wir mit den Daten und der CSV-Datei interagieren. Ein weiteres Beispiel ist eine Online-Banking-Website, die es uns ermöglicht, Transaktionsdetails in einer CSV-Datei herunterzuladen.

In diesem Tutorial lernen wir, eine CSV-Datei basierend auf den angegebenen Daten im JavaScript- oder JSON-Objektformat zu erstellen und die Datei herunterzuladen.

Grammatik

Benutzer können CSV-Dateien aus bestimmten Daten erstellen und herunterladen, indem sie der folgenden Syntax folgen.

laptops.forEach(function (row) {
   csvData += data
});

let anchor = document.createElement('a');
anchor.href = 'data:text/csv;charset=utf-8,' + encodeURI(csvData);
anchor.click();

In der obigen Syntax ist „csvData“ ein Array, das die Zeilen der CSV-Datei mit Daten anhängt. Anschließend erstellen wir mithilfe von Ankertags eine CSV-Datei aus csvData und laden die Datei herunter, indem wir auf das Ankerelement klicken.

Beispiel

Im folgenden Beispiel erstellen wir zunächst ein Array von Objekten namens „Laptops“, wobei jedes Objekt des Arrays die Eigenschaften Marke, Prozessor, Preis und RAM enthält.

In der Funktion downloadFile() fügen wir die durch Kommas getrennten Objektschlüssel zur Variablen „csvData“ hinzu. Danach durchlaufen wir das angegebene Array von Objekten und bereiten eine einzelne Zeile vor, indem wir jeden Attributwert in derselben Reihenfolge verketten (durch Kommas getrennt und an die Variable „CSVData“ anhängen).

Als nächstes erstellen wir das Ankerelement mit der Methode createElement() und fügen „csvData“ als Wert des href-Attributs hinzu, nachdem wir es mit der Methode encodeURI() codiert haben. Zusätzlich legen wir den Zielwert und den Download-Attributwert fest. Abschließend klicken wir auf das Ankerelement, um die CSV-Datei herunterzuladen.

In der Ausgabe kann der Benutzer auf eine Schaltfläche klicken, um die Daten in eine CSV-Datei herunterzuladen.

<html>
<body>
   <h3>Creating and dowlonading the CSV file from the given data in JavaScript</h3>
   <div id="data"> </div>
   <button onclick="downloadFile()"> Download CSV file </button>
   <script>
      let laptops = [{
         brand: 'HP',
         processor: 'i3',
         price: 30000,
         ram: 4
      },
      {
         brand: 'Dell',
         processor: 'i5',
         price: 50000,
         ram: 8
      },
      {
         brand: 'Apple',
         processor: 'i7',
         price: 70000,
         ram: 16
      },
      {
         brand: 'Lenovo',
         processor: 'i3',
         price: 35000,
         ram: 4
      },
      {
         brand: 'Asus',
         processor: 'i5',
         price: 45000,
         ram: 8
      },
      {
         brand: 'Acer',
         processor: 'i7',
         price: 65000,
         ram: 16
      }
      ];
   
      // Function to download data to a CSV file
      function downloadFile() {
      
         // Add header
         let csvData = 'Brand, Processor, Price, RAM';
         
         // Add data
         laptops.forEach(function (row) {
            csvData += row.brand + ',' + row.processor + ',' + row.price + ',' + row.ram + '';
         });
         
         // Download the CSV file
         let anchor = document.createElement('a');
         anchor.href = 'data:text/csv;charset=utf-8,' + encodeURI(csvData);
         anchor.target = '_blank';
         anchor.download = 'laptops.csv';
         anchor.click();
      }
   </script>
</body>
</html>

Beispiel

Im folgenden Beispiel erhalten wir die Daten von der API und erstellen eine CSV-Datei mit den JSON-Daten. Wir haben im HTML-Bereich eine Schaltfläche erstellt. Wenn der Benutzer auf die Schaltfläche klickt, führt er die Funktion downloadFile() aus, um die JSON-Daten abzurufen und in eine CSV-Datei herunterzuladen.

Programmierer können die folgenden Schritte ausführen, um den Beispielcode zu verstehen -

Schritt 1 – Verwenden Sie die fetch()-API, um Daten von der API-URL abzurufen.

Schritt 2 – Anschließend konvertieren Sie die Antwort mithilfe der Methode res.json() in ein JSON-Objekt.

Schritt 3 – Initialisieren Sie im then()-Block das Array csvData[], um die Zeilen der CSV-Datei zu speichern.

Schritt 4 – Holen Sie sich das erste Objekt aus der Antwort und übergeben Sie es als Argument an die Methode Object.keys(), um alle Schlüssel im Array abzurufen. Anschließend verwenden Sie die Methode „join()“, um die Schlüssel zu einer einzelnen Zeichenfolge zu verketten, durch Kommas getrennt zu verknüpfen und an das Array „csvData“ zu übertragen.

Schritt 5 – Durchlaufen Sie alle Objekte, die wir in der Antwort erhalten haben. In der Schleife verwenden wir die Methode „map()“ mit dem Array „heads“, um den Wert vom aktuellen Objekt basierend auf dem Array-Element „heads“ (Objektschlüssel) abzurufen und den Wert dem Array „rowValues“ zuzuordnen.

Schritt 6 – Als nächstes verwenden Sie die Methode join(), um alle Elemente des Arrays „rowValues“ zu verbinden und sie in das Array „csvData“ zu verschieben.

Schritt 7 – Verketten Sie alle Elemente des Arrays „csvData“ mit dem Trennzeichen „

“ und übergeben Sie es als getCSVFile()-Funktionsparameter.

Schritt 8- Erstellen Sie in der Funktion getCSVFile() eine neue Instanz des Ankerelements. Setzen Sie anschließend die codierten csvData auf den Attributwert „href“ und legen Sie die Attributwerte „target“ und „download“ fest.

Schritt 9 – Klicken Sie auf das Ankerelement, um die Datei herunterzuladen.

<html>
<body>
   <h3>Creating and dowlonading the CSV file </i> after fetching JSON data in JavaScript</h3>
   <div id = "data"> </div>
   <button onclick = "downloadFile()"> Download CSV file </button>
   <script>
      function downloadFile() {
         let APIURL = "https://dummyjson.com/products";
         
         // Fetch data from API
         fetch(APIURL)
         .then(response => response.json())
         .then(data => {
            let csvData = [];
            
            // Get headers
            let heads = Object.keys(data.products[0]);
            
            // Add headers to csvData
            csvData.push(heads.join(','));
            
            // Traveres through each row
            for (let row of data.products) {
               
               // Get values from each row
               let rowValues = heads.map(headerData => {
                  
                  // Get value according to the header
                  let final = ('' + row[headerData]).replace(/"/g, '"');
                  return `"${final}"`;
               });
               
               // Push values in csvData
               csvData.push(rowValues.join(','));
            }
            // Call function to download CSV file
            getCSVFile(csvData.join(''));
         });
      }
      function getCSVFile(csvData) {
         let anchor = document.createElement('a');
         anchor.href = 'data:text/csv;charset=utf-8,' + encodeURI(csvData);
         anchor.target = '_blank';
         anchor.download = 'test.csv';
         anchor.click();
      }
   </script>
</body>
</html>

Beide Beispielcodes bestehen aus zwei Hauptteilen. Der erste Teil besteht darin, die angegebenen Daten zu manipulieren und sie mit einer durch Kommas getrennten Zeichenfolge zu verketten, die wir für die CSV-Dateidaten verwenden. Der nächste Teil besteht darin, die Daten an die Datei anzuhängen und die Datei herunterzuladen. Um eine CSV-Datei zu erstellen, verwenden wir eine Dummy-Instanz des Ankerelements.

Das obige ist der detaillierte Inhalt vonWie erstelle und lade ich CSV-Dateien in JavaScript herunter?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript json html Object 字符串循环 map 对象 href

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Streamen Sie die Methoden writable.cork() und uncork() in Node.jsNächster Artikel：Streamen Sie die Methoden writable.cork() und uncork() in Node.js

In Verbindung stehende Artikel

Mehr sehen