Come caricare e scaricare file CSV con AngularJS

Questo post ti mostrerà come caricare i dati dei file CSV su AngularJS, leggere i dati e convertirli in JSON per l'elaborazione. Quindi, vedrai come fare tutto al contrario e scaricare un dump di dati CSV da AngularJS.

I file CSV sono preferiti per la loro semplicità. Sono anche ampiamente supportati da molti tipi di programmi e forniscono un modo semplice per rappresentare i dati del foglio di calcolo.

Prerequisiti

Prima di iniziare con questo tutorial, assicurati di aver installato Node.js sul tuo computer. Se non lo hai ancora, vai sul sito ufficiale e installalo.

Dovresti anche avere una conoscenza di base delle seguenti tecnologie:

• HTML
• CSS
• JavaScript

Se hai già installato Node.js, controlla se hai le ultime versioni di Node e NPM.

nodo -v npm -v

Moduli CSV in angolare

Esistono diversi modi per manipolare CSV in Angolare e includono:

• Papa Parse: Papa Parse è un potente parser CSV che è in grado di analizzare stringhe CSV in file piccoli e grandi e di convertirli in JSON. Utilizzeremo questa libreria in questo tutorial.
  
• csvtojson: Questo è un pacchetto di nodi che è anche semplice da usare.
• Lettore di file: È usato per leggere il contenuto dei file usando File o macchia oggetti per specificare il file da leggere. Tuttavia, questo non è un modo efficiente perché devi ancora scorrere tutte le linee del CSV e poi JSON.stringify i risultati.

Iniziare

Il nostro obiettivo è essere in grado di fare quanto segue:

• scarica un file CSV sul lato client
• caricare un file CSV
• leggi un file CSV
• convertire i dati del file CSV in JSON per l'elaborazione

La nostra interfaccia dovrebbe essere simile a questa:

Inizialmente inizieremo scrivendo il codice HTML per l'interfaccia mostrata sopra.

Crea una cartella denominata il mio progetto, CD nella cartella del progetto e creare due file: home.html e app.js.

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

Poiché utilizzeremo il modulo Papa Parse, visita il sito ufficiale e scarica la libreria. Quindi, estrai il contenuto e salva il papaparse.js e papaparse.min.js file nella cartella del progetto. La struttura del tuo progetto dovrebbe assomigliare a questa:

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

Di seguito è riportato il codice HTML per la creazione della nostra interfaccia. Salva come home.html.

        
 
 
 
BULK TOP UP 
 
 
 
 
Il file Excel dovrebbe contenere tre colonne 
 
La prima colonna contiene il Riferimento
 
La seconda colonna contiene il nome di battesimo
 
La terza colonna contiene il Cognome  
 
La seconda colonna contiene il Data di nascita
 
La terza colonna contiene il Sessodella persona
 
 
 
Le intestazioni delle colonne dovrebbero essere Riferimento ,Nome di battesimo ,Cognome,Dob,Sesso
 
 Un file di esempio è disponibile per il download
 
 Scarica CSV 
 
 
 
 
 
  
Il tuo file CSV caricato ti verrà mostrato in un'anteprima per la conferma
 
 
 
 
 
 
  
 
 Caricare! 
 
 
 
 
Conferma il file da caricare e fai clic sul pulsante Procedi in basso
 
 
 Procedere! 
 
 
 
 
 
 
 
 
  

Nel codice sopra, usiamo il ng-app direttiva per definire la nostra applicazione. Quindi aggiungiamo le librerie AngularJS e jQuery alla nostra pagina Web e al resto dei file di script, ad es.. app.js, papaparse.js, e papaparse.min.js.

Quindi definiamo il controller dell'applicazione e quindi associamo i controlli HTML ai dati dell'applicazione.

Scarica un file CSV

Dato che abbiamo già l'interfaccia con il link in cui un utente sarà in grado di scaricare il file CSV, procediamo ora a scrivere il codice angolare che conterrà i dati da scaricare, quindi collegarlo con i controlli HTML.

Quindi rendiamo disponibile il CSV per il download sul lato client.

Nel app.js, inizializzare l'app Angolare e definire il CsvCtrl controllore.

'usare rigoroso'; / * Modulo app * / var app = angular.module ("myApp", []); 

Successivamente, definisci i dati di esempio in JSON e convertili in un file CSV con l'aiuto del modulo Papa Parse.

app.controller ("CsvCtrl", ["$ scope", "$ q", funzione ($ 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",  "Riferimento": "2", "First_name": "Rebbecca", "Last_name": "Bellon", "Dob":" 1977 " "Sex": "F",  "Riferimento": "3", "First_name": "Stanley", "Last_name": "Benton", "Dob": "1984", "Sex":" M "] 'var csv = Papa.unparse (json_pre); if (window.navigator.msSaveOrOpenBlob) var blob = new Blob ([decodeURIComponent (encodeURI (csv))], tipo:" testo / csv; charset = utf -8; "); navigator.msSaveBlob (blob, 'sample.csv'); else a.href = 'dati: attachment / csv; charset = utf-8,' + encodeURI (csv); a.target = '_blank'; a.download = 'sample.csv'; document.body.appendChild (a); a.click ();]);

Caricamento e lettura di un file CSV

Ecco la funzione angolare che carica e legge un file CSV.

app.controller ("CsvCtrl", ["$ scope", "$ q", funzione ($ scope, $ q) // ... il resto del codice // Carica e legge la funzione CSV $ scope.submitForm = function ( form) clearAlerts (); var filename = document.getElementById ("bulkDirectFile"); if (nomefile.valore.lunghezza < 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 = rows [i] .split (", "); for (var j = 0; j < cells.length; j++)  var cell = $("
") .css ('border', '1px solid black'); cell.html (cells [j]); row.append (cell); table.append (row); $ (" # dvCSV "). html ( "); $ ( "# DvCSV") accodare (tabella).;  reader.readAsText (filename.files [0]);  return false; ]); 
Qui, confermiamo se il CSV è valido e non vuoto. Se è vuoto o non è stato caricato alcun file CSV, forniamo all'utente un messaggio di avviso: "Si prega di caricare un file". Se il CSV è valido, convertiamo i dati in un formato tabella e lo presentiamo come mostrato di seguito.
Convertire un file CSV in JSON
Nell'ultima parte di questo tutorial, converte i dati CSV in formato JSON (un modulo che può essere utilizzato da un'API). Di seguito è riportata la funzione che converte i dati CSV in JSON. Stamperemo i dati sulla console solo perché non abbiamo un'API per il consumo dei dati.
app.controller ("CsvCtrl", ["$ scope", "$ q", funzione ($ scope, $ q) // ... // Converti in funzione JSON $ scope.add = function () var Tabella = documento .getElementById ('Tabella'); var file = document.getElementById ("bulkDirectFile"). files [0]; $ ('. loading'). show (); var allResults = []; Papa.parse (file,  download: true, header: true, skipEmptyLines: true, error: function (err, file, inputElem, reason) , complete: function (results) allResults.push (results.data); console.log (results.data ));]);
Nella funzione sopra, otteniamo il file CSV e usiamo Papa Parse per convertirlo in JSON. Il codice completo in app.js è mostrato sotto.
Conclusione
In questo post hai visto come caricare e scaricare i dati CSV e come analizzare i dati CSV da e verso JSON.
Spero che questo tutorial ti abbia aiutato a capire come manipolare i file CSV con il modulo Papa Parse e quanto sia potente quella libreria. Sentiti libero di sperimentare con file più grandi per vedere la piena funzionalità della libreria Papa Parse. 



		
			
	   
	




Codice


		











	

        
		
Come caricare file con CodeIgniter e AJAX
			
			
	
			
        				
	
		
	

        
		
Come caricare un PowerPoint su YouTube in 60 secondi
			
			

					
        
	






	

	

			

							×