CSV-bestanden uploaden en downloaden met AngularJS

In dit bericht ziet u hoe u CSV-bestanden kunt uploaden naar AngularJS, de gegevens kunt lezen en deze vervolgens naar JSON kunt converteren voor verwerking. Vervolgens ziet u hoe u het hele ding achteruit kunt doen en een CSV-gegevensdump van AngularJS kunt downloaden.

CSV-bestanden hebben de voorkeur vanwege hun eenvoud. Ze worden ook breed ondersteund door veel soorten programma's en bieden een eenvoudige manier om spreadsheetgegevens weer te geven.

voorwaarden

Voordat u aan deze zelfstudie begint, moet Node.js op uw computer zijn geïnstalleerd. Als je het nog niet hebt, ga dan naar de officiële website en installeer het.

U moet ook een basiskennis hebben van de volgende technologieën:

• HTML
• CSS
• JavaScript

Als je al hebt Node.js hebt geïnstalleerd, controleer dan of je de nieuwste versies van Node en NPM hebt.

knooppunt -v npm -v

CSV-modules in Angular

Er zijn verschillende manieren om CSV in Angular te manipuleren, en ze omvatten:

• Papa Parse: Papa Parse is een krachtige CSV-parser die in staat is CSV-strings in kleine en grote bestanden te parseren en terug naar JSON te converteren. We zullen deze bibliotheek gebruiken in deze tutorial.
  
• csvtojson: Dit is een knooppuntenpakket dat ook eenvoudig te gebruiken is.
• Bestandslezer: Het wordt gebruikt om de inhoud van bestanden te lezen met behulp van het dossier of bobbel objecten om het bestand te specificeren dat moet worden gelezen. Dit is echter geen efficiënte manier omdat u nog steeds alle regels van het CSV-bestand doorloopt en vervolgens JSON.stringify de resultaten.

Ermee beginnen

Ons doel is om het volgende te kunnen doen:

• download een CSV-bestand aan de kant van de klant
• upload een CSV-bestand
• lees een CSV-bestand
• converteer CSV-bestandsgegevens naar JSON voor verwerking

Onze interface zou er ongeveer zo uit moeten zien:

We beginnen met het schrijven van de HTML-code voor de hierboven getoonde interface.

Maak een map met de naam mijn project, CD in de projectmap en maak twee bestanden: home.html en app.js.

mkdir my_project cd my_project touch home.html touch app.js

Aangezien we de Papa Parse-module gaan gebruiken, ga je naar de officiële site en download je de bibliotheek. Pak vervolgens de inhoud uit en sla de inhoud op papaparse.js en papaparse.min.js bestanden in uw projectmap. Uw projectstructuur zou er als volgt uit moeten zien:

mijn_project / app.js home.html papaparse.js papaparse.min.js

Hieronder staat de HTML-code voor het maken van onze interface. Bewaar het als home.html.

        
 
 
 
BULK BOVENKANT 
 
 
 
 
Het Excel-bestand zou drie kolommen moeten bevatten 
 
De eerste kolom bevat de Referentie
 
De tweede kolom bevat de Voornaam
 
De derde kolom bevat de Achternaam  
 
De tweede kolom bevat de Geboortedatum
 
De derde kolom bevat de Seksvan de persoon
 
 
 
De kolomkoppen zouden moeten zijn Referentie ,Voornaam ,Achternaam,Dob,Seks
 
 Een voorbeeldbestand is beschikbaar om te downloaden
 
 CSV downloaden 
 
 
 
 
 
  
Uw geüploade csv-bestand wordt u getoond in een voorbeeld van Bevestiging
 
 
 
 
 
 
  
 
 Uploaden! 
 
 
 
 
Bevestig het bestand dat moet worden geüpload en klik op de knop Doorgaan hieronder
 
 
 Doorgaan! 
 
 
 
 
 
 
 
 
  

In de bovenstaande code gebruiken we de ng-app richtlijn om onze toepassing te definiëren. Vervolgens voegen we de AngularJS- en jQuery-bibliotheken toe aan onze webpagina, evenals de rest van de scriptbestanden, d.w.z.. app.js, papaparse.js, en papaparse.min.js.

Vervolgens definiëren we de controller van de toepassing en binden vervolgens de HTML-besturingselementen aan de toepassingsgegevens.

Download een CSV-bestand

Omdat we al de interface hebben met de link waar een gebruiker het CSV-bestand kan downloaden, gaan we nu verder met het schrijven van de hoekcode die de gegevens bevat die moeten worden gedownload en binden deze vervolgens met de HTML-besturingselementen.

Vervolgens maken we de CSV beschikbaar voor downloaden aan de clientzijde.

In app.js, initialiseer de Angular-app en definieer de CsvCtrl controleur.

'gebruik strikt'; / * App-module * / var app = angular.module ("myApp", []); 

Definieer vervolgens de voorbeeldgegevens in JSON en converteer deze naar een CSV-bestand met behulp van de Papa Parse-module.

app.controller ("CsvCtrl", ["$ scope", "$ q", function ($ scope, $ q) var clearAlerts = function () $ scope.error = , $ scope.warning = null ; $ scope.download = function () var a = document.createElement ("a"); var json_pre = '["Reference": "1", "First_name": "Lauri", "Last_name": "Amerman " "Dob": "1980", "Sex": "F",  "Reference": "2", "voornaam": "Rebbecca", "achternaam": "Bellon", "Dob":" 1977 " "Sex": "F",  "Reference" "3", "voornaam": "Stanley", "achternaam": "Benton", "Dob": "1984", "Sex":" 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: attachment / csv; charset = utf-8,' + encodeURI (csv); a.target = '_blank'; a.download = 'sample.csv'; document.body.appendChild (a); a.click ();]);

Uploaden en lezen van een CSV-bestand

Hier is de hoekfunctie die een CSV-bestand uploadt en leest.

app.controller ("CsvCtrl", ["$ scope", "$ q", function ($ scope, $ q) // ... de rest van de code // Upload en lees de CSV-functie $ scope.submitForm = function ( form) clearAlerts (); var filename = document.getElementById ("bulkDirectFile"); if (bestandsnaam.value.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 = $("") .css ('width', '100%'); var rows = e.target.result.split (" \ n "); for (var i = 0; i < rows.length; i++)  var row = $(""); var cells = rijen [i] .split (", "); for (var j = 0; j < cells.length; j++)  var cell = $("
") .css ('border', '1px solid black'); cell.html (cellen [j]); row.append (cel); table.append (rij); $ (" # dvCSV "). html ( "); $ ( "# DvCSV") toevoegen (tabel).;  reader.readAsText (filename.files [0]);  return false; ]); 
Hier bevestigen we of de CSV geldig is en niet leeg. Als het leeg is of geen CSV-bestand is geüpload, geven we de gebruiker een waarschuwingsbericht: "Upload een bestand." Als de CSV geldig is, converteren we de gegevens naar een tabelindeling en presenteren deze zoals hieronder wordt weergegeven.
Converteer een CSV-bestand naar JSON
In het laatste deel van deze zelfstudie converteert u de CSV-gegevens naar JSON-indeling (een formulier dat kan worden geconsumeerd door een API). Hieronder ziet u de functie die de CSV-gegevens converteert naar JSON. We zullen de gegevens alleen naar de console afdrukken, omdat we geen API hebben voor het verbruik van de gegevens.
app.controller ("CsvCtrl", ["$ scope", "$ q", function ($ scope, $ q) // ... // Convert to JSON function $ scope.add = function () var Table = document .getElementById ('Tabel'); var file = document.getElementById ("bulkDirectFile"). bestanden [0]; $ ('. loading'). show (); var allResults = []; Papa.parse (bestand,  download: true, header: true, skipEmptyLines: true, error: function (err, file, inputElem, reason) , complet: function (results) allResults.push (results.data); console.log (results.data ));]);
In de bovenstaande functie krijgen we het CSV-bestand en gebruiken we Papa Parse om het naar JSON te converteren. De volledige code in app.js wordt hieronder getoond.
Conclusie
In dit bericht zag je hoe je CSV-gegevens kunt uploaden en downloaden en hoe je CSV-gegevens in en uit JSON kunt analyseren.
Ik hoop dat deze tutorial je heeft geholpen om te begrijpen hoe je CSV-bestanden kunt manipuleren met de Papa Parse-module en hoe krachtig die bibliotheek is. Experimenteer met grotere bestanden om de volledige functionaliteit van de Papa Parse-bibliotheek te zien. 



		
			
	   
	




Code


		











	

        
		
Hoe bestanden te uploaden met CodeIgniter en AJAX
			
			
	
			
        				
	
		
	

        
		
Hoe upload je een PowerPoint naar YouTube in 60 seconden
			
			

					
        
	






	

	

			

							×