Share
Cet article vous montrera comment télécharger des données de fichiers CSV vers AngularJS, les lire, puis les convertir en JSON pour les traiter. Ensuite, vous verrez comment inverser la procédure et télécharger une image CSV à partir d’AngularJS..
Les fichiers CSV sont préférés en raison de leur simplicité. Ils sont également largement pris en charge par de nombreux types de programmes et offrent un moyen simple de représenter les données de feuilles de calcul..
Avant de commencer avec ce didacticiel, assurez-vous que Node.js est installé sur votre ordinateur. Si vous ne l'avez pas encore, rendez-vous sur le site officiel et installez-le.
Vous devez également avoir une compréhension de base des technologies suivantes:
Si vous avez déjà installé Node.js, vérifiez si vous disposez des dernières versions de Node et NPM..
noeud -v npm -v
Il existe plusieurs façons de manipuler le format CSV en mode angulaire, notamment:
Accentsconagua
csvtojson: Ceci est un paquet de noeud qui est aussi simple à utiliser.Fichier ou Goutte objets pour spécifier le fichier à lire. Cependant, ce n'est pas un moyen efficace, car vous devez toujours parcourir toutes les lignes du fichier CSV, puis JSON.stringify Les resultats.Notre objectif est de pouvoir effectuer les tâches suivantes:
Notre interface devrait ressembler à ceci:
Commençons par écrire le code HTML de l'interface ci-dessus..
Créez un dossier nommé mon projet, CD dans le dossier du projet et créez deux fichiers: home.html et app.js.
mkdir mon_projet cd mon_projet touch home.html touch app.js
Puisque nous allons utiliser le module Papa Parse, allez sur le site officiel et téléchargez la bibliothèque. Ensuite, extrayez le contenu et enregistrez le papaparse.js et papaparse.min.js fichiers dans votre dossier de projet. Votre structure de projet devrait ressembler à ceci:
mon_projet / app.js home.html papaparse.js papaparse.min.js
Vous trouverez ci-dessous le code HTML pour la création de notre interface. Enregistrez-le sous home.html.
- Le fichier Excel doit contenir trois colonnes
- La première colonne contient les Référence
- La deuxième colonne contient les Prénom
- La troisième colonne contient les Nom de famille
- La deuxième colonne contient les Date de naissance
- La troisième colonne contient les Sexede la personne
Les en-têtes de colonne doivent être Référence ,Prénom ,Nom de famille,Dob,Sexe
Un exemple de fichier est disponible au téléchargement
Votre fichier csv téléchargé vous sera présenté dans un aperçu pour confirmation.
Dans le code ci-dessus, nous utilisons le ng-app directive pour définir notre application. Nous ajoutons ensuite les bibliothèques AngularJS et jQuery à notre page Web, ainsi que le reste des fichiers de script, c.-à-d.. app.js, papaparse.js, et papaparse.min.js.
Nous définissons ensuite le contrôleur de l'application, puis lions les contrôles HTML aux données de l'application..
Puisque nous avons déjà l'interface avec le lien où un utilisateur pourra télécharger le fichier CSV, nous allons maintenant écrire le code angulaire qui contiendra les données à télécharger, puis le lier avec les contrôles HTML..
Nous rendons ensuite le fichier CSV disponible au téléchargement côté client..
Dans app.js, initialiser l'application angulaire et définir la CsvCtrl manette.
'use strict'; / * Module d'application * / var app = angular.module ("myApp", []); Ensuite, définissez les exemples de données en JSON et convertissez-les en fichier CSV à l'aide du module Papa Parse..
app.controller ("CsvCtrl", ["$ scope", "$ q", fonction ($ scope, $ q) var clearAlerts = function () $ scope.error = , $ scope.warning = null ; $ scope.download = function () var a = document.createElement ("a"); var json_pre = '["Référence": "1", "First_name": "Lauri", "Last_name": "Amerman "," Dob ":" 1980 "," Sexe ":" F ", " Référence ":" 2 "," Prénom ":" Rebecca "," Nom ":" Bellon "," Dob ":" 1977 "," Sex ":" F ", " Référence ":" 3 "," Prénom ":" Stanley "," Nom ":" Benton "," Dob ":" 1984 "," Sexe ":" M "] 'var csv = Papa.unparse (json_pre); if (window.navigator.msSaveOrOpenBlob) var blob = new Blob ([decodeURIComponent (encodeURI (csv))]], type:" text / csv; charset = utf -8; "); navigator.msSaveBlob (blob, 'sample.csv'); else a.href = 'data: pièce jointe / csv; charset = utf-8,' + encodeURI (csv); a.target = '_blank'; a.download = 'sample.csv'; document.body.appendChild (a); a.click ();]);Voici la fonction angulaire qui télécharge et lit un fichier CSV.
app.controller ("CsvCtrl", ["$ scope", "$ q", fonction ($ scope, $ q) //… le reste du code // Chargement et lecture de la fonction CSV $ scope.submitForm = function ( form) clearAlerts (); var nomfichier = document.getElementById ("bulkDirectFile"); if (nomfichier.valeur.length < 1 ) ($scope.warning = "Please upload a file"); else $scope.title = "Confirm file"; var file = filename.files[0]; console.log(file) var fileSize = 0; if (filename.files[0]) var reader = new FileReader(); reader.onload = function (e) var table = $("Ici, nous confirmons si le CSV est valide et non vide. S'il est vide ou qu'aucun fichier CSV n'a été téléchargé, nous envoyons un message d'avertissement à l'utilisateur: "Veuillez télécharger un fichier." Si le fichier CSV est valide, nous convertissons les données dans un format de tableau et les présentons comme indiqué ci-dessous..
Dans la dernière partie de ce didacticiel, les données CSV seront converties au format JSON (un formulaire pouvant être utilisé par une API). Vous trouverez ci-dessous la fonction qui convertit les données CSV en JSON. Nous n'imprimerons les données que sur la console car nous ne disposons pas d'une API pour consommer les données..
app.controller ("CsvCtrl", ["$ scope", "$ q", fonction ($ scope, $ q) //… // Conversion en fonction JSON $ scope.add = function () var Table = document .getElementById ('Table'); var fichier = document.getElementById ("bulkDirectFile"). files [0]; $ ('. loading'). show (); var allResults = []; Papa.parse (fichier, download: true, en-tête: true, skipEmptyLines: true, erreur: function (err, fichier, inputElem, raison) , complète: function (résultats) allResults.push (results.data); console.log (results.data ));]);Dans la fonction ci-dessus, nous récupérons le fichier CSV et utilisons Papa Parse pour le convertir en JSON. Le code complet en app.js est montré ci-dessous.
Dans cet article, vous avez vu comment télécharger et télécharger des données CSV et comment analyser des données CSV dans et hors de JSON..
J'espère que ce tutoriel vous a aidé à comprendre comment manipuler des fichiers CSV avec le module Papa Parse et à quel point cette librairie est puissante. N'hésitez pas à expérimenter avec des fichiers plus volumineux pour voir toutes les fonctionnalités de la bibliothèque Papa Parse.
