Maison > Article > interface Web > Comment créer et télécharger des fichiers CSV en JavaScript ?

Comment créer et télécharger des fichiers CSV en JavaScript ?

王林avant: 2023-09-17 08:09:03750parcourir

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

JavaScript possède de puissantes capacités pour manipuler diverses données et gérer des fichiers dans différents formats. Parfois, les développeurs doivent traiter des données à l'aide de fichiers CSV lors du développement d'applications Web à l'aide de JavaScript.

Par exemple, nous construisons une plateforme de commerce électronique où les utilisateurs peuvent acheter et vendre des produits. De plus, nous souhaitons permettre aux utilisateurs de télécharger les détails de la commande dans un fichier CSV en fonction d'une plage horaire. Dans ce cas, nous devons interagir avec les données et le fichier CSV. Un autre exemple est que les sites Web de banque en ligne nous permettent de télécharger les détails des transactions dans un fichier CSV.

Dans ce tutoriel, nous apprendrons à créer un fichier csv basé sur les données fournies au format objet JavaScript ou JSON et à télécharger le fichier.

Grammaire

Les utilisateurs peuvent créer et télécharger des fichiers CSV à partir de données données en suivant la syntaxe ci-dessous.

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

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

Dans la syntaxe ci-dessus, « csvData » est un tableau ajoutant les lignes du fichier CSV avec des données. Après cela, nous créons un fichier CSV à partir de csvData à l'aide de balises d'ancrage et téléchargeons le fichier en cliquant sur l'élément d'ancrage.

Exemple

Dans l'exemple ci-dessous, nous créons d'abord un tableau d'objets appelés « ordinateurs portables » où chaque objet du tableau contient les propriétés Marque, Processeur, Prix et RAM.

Dans la fonction downloadFile(), nous ajoutons les clés d'objet séparées par des virgules à la variable « csvData ». Après cela, nous parcourons le tableau d'objets donné et préparons une seule ligne en concaténant chaque valeur d'attribut dans le même ordre (séparées par des virgules et en l'ajoutant à la variable "CSVData").

Ensuite, nous créons l'élément d'ancrage à l'aide de la méthode createElement() et ajoutons « csvData » comme valeur de l'attribut href après l'avoir codé à l'aide de la méthode encodeURI(). De plus, nous définissons la valeur cible et téléchargeons la valeur de l'attribut. Enfin, nous cliquons sur l'élément d'ancrage pour télécharger le fichier CSV.

Dans la sortie, l'utilisateur peut cliquer sur un bouton pour télécharger les données dans un fichier CSV.

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

Exemple

Dans l'exemple ci-dessous, nous allons récupérer les données de l'API et créer un fichier CSV en utilisant les données JSON. Nous avons créé un bouton dans la section HTML et lorsque l'utilisateur clique sur le bouton, il exécute la fonction downloadFile() pour obtenir les données JSON et les télécharger dans un fichier CSV.

Les programmeurs peuvent suivre les étapes suivantes pour comprendre l'exemple de code -

Étape 1 - Utilisez l'API fetch() pour obtenir des données à partir de l'URL de l'API.

Étape 2 - Après cela, convertissez la réponse en un objet JSON à l'aide de la méthode res.json().

Étape 3 - Dans le bloc then(), initialisez le tableau csvData[] pour stocker les lignes du fichier CSV.

Étape 4 - Récupérez le premier objet de la réponse et transmettez-le comme argument à la méthode Object.keys() pour obtenir toutes les clés du tableau. Après cela, utilisez la méthode join() pour concaténer les clés en une seule chaîne, séparées par des virgules et transmises au tableau csvData.

Étape 5- Parcourez tous les objets que nous avons reçus dans la réponse. Dans la boucle, nous utilisons la méthode map() avec le tableau 'heads' pour obtenir la valeur de l'objet actuel en fonction de l'élément du tableau 'heads' (clé d'objet) et mapper la valeur sur le tableau 'rowValues'.

Étape 6 - Ensuite, utilisez la méthode join() pour joindre tous les éléments du tableau "rowValues" et les pousser dans le tableau "csvData".

Étape 7 - Concaténez tous les éléments du tableau "csvData" à l'aide du délimiteur "

" et transmettez-le comme paramètre de fonction getCSVFile().

Étape 8- Dans la fonction getCSVFile(), créez une nouvelle instance de l'élément d'ancrage. Après cela, définissez le csvData codé sur la valeur d'attribut « href » et définissez les valeurs d'attribut « cible » et « téléchargement ».

Étape 9- Cliquez sur l'élément d'ancrage pour télécharger le fichier.

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

Les deux exemples de codes contiennent deux parties principales. La première partie consiste à manipuler les données données et à les concaténer avec une chaîne séparée par des virgules, que nous utiliserons pour les données du fichier CSV. La partie suivante consiste à ajouter les données au fichier et à télécharger le fichier. Pour créer un fichier CSV, nous utilisons une instance factice de l'élément d'ancrage.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Méthodes Stream writable.cork() et uncork() dans Node.jsArticle suivant：Méthodes Stream writable.cork() et uncork() dans Node.js

Articles Liés

Voir plus