Cum să încărcați și să descărcați fișiere CSV cu AngularJS

Această postare vă va arăta cum să încărcați datele fișierelor CSV în AngularJS, să citiți datele și apoi să le convertiți în JSON pentru procesare. Apoi, veți vedea cum să faceți totul în sens invers și descărcați un depozit de date CSV de la AngularJS.

Fișierele CSV sunt preferate datorită simplității lor. Acestea sunt, de asemenea, susținute pe scară largă de numeroase tipuri de programe și oferă o modalitate directă de a reprezenta datele de calcul tabelar.

Cerințe preliminare

Înainte de a începe cu acest tutorial, asigurați-vă că aveți Node.js instalat pe computer. Dacă nu aveți încă acest lucru, mergeți la site-ul oficial și instalați-l.

De asemenea, trebuie să aveți o înțelegere de bază a următoarelor tehnologii:

• HTML
• CSS
• JavaScript

Dacă aveți deja Node.js instalate, verificați dacă aveți cele mai recente versiuni de Node și NPM.

nod -v npm -v

Module CSV în unghiulare

Există mai multe moduri de a manipula CSV în Angular și includ:

• Papa Parse: Papa Parse este un parser puternic CSV care este capabil să analizeze șiruri de caractere CSV în fișiere mici și mari, precum și să convertească înapoi la JSON. Vom folosi această bibliotecă în acest tutorial.
  
• csvtojson: Acesta este un pachet de noduri care este, de asemenea, simplu de utilizat.
• Reader de fișiere: Este folosit pentru a citi conținutul fișierelor utilizând Fişier sau pată de cerneală obiecte pentru a specifica fișierul care trebuie citit. Cu toate acestea, aceasta nu este o modalitate eficientă, deoarece trebuie să continuați prin toate liniile CSV și apoi JSON.stringify rezultatele.

Noțiuni de bază

Scopul nostru este de a putea face următoarele:

• descărcați un fișier CSV pe partea clientului
• încărcați un fișier CSV
• citiți un fișier CSV
• converti datele de fișier CSV în JSON pentru procesare

Interfața noastră ar trebui să arate cam așa:

Vom începe mai întâi scriind codul HTML pentru interfața afișată mai sus.

Creați un folder numit proiectul meu, CD în dosarul proiectului și creați două fișiere: home.html și app.js.

mkdir my_project cd my_project atingeți home.html atingeți app.js

Deoarece vom folosi modulul Papa Parse, mergeți pe site-ul oficial și descărcați biblioteca. Apoi, extrageți conținutul și salvați papaparse.js și papaparse.min.js fișiere în dosarul proiectului. Structura proiectului trebuie să arate astfel:

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

Mai jos este codul HTML pentru crearea interfeței noastre. Salvați-o ca home.html.

        
 
 
 
ÎNCĂRCĂMÂNTUL ÎNALT 
 
 
 
 
Fișierul Excel trebuie să conțină trei coloane 
 
Prima coloană conține Referinţă
 
A doua coloană conține Nume
 
A treia coloană conține Numele de familie  
 
A doua coloană conține Data de nastere
 
A treia coloană conține Sexa persoanei
 
 
 
Antetele coloanelor ar trebui să fie Referinţă ,Nume ,Numele de familie,DOB,Sex
 
 Un exemplu de fișier este disponibil pentru descărcare
 
 Descărcați CSV 
 
 
 
 
 
  
Fișierul csv încărcat vă va fi afișat într-o previzualizare pentru Confirmare
 
 
 
 
 
 
  
 
 Încărcați! 
 
 
 
 
Confirmați fișierul care urmează să fie încărcat și faceți clic pe butonul Continuare
 
 
 Continua! 
 
 
 
 
 
 
 
 
  

În codul de mai sus, folosim ng-app directivă pentru a defini cererea noastră. Apoi adăugăm bibliotecile AngularJS și jQuery la pagina noastră web, precum și restul fișierelor de script, adică. app.js, papaparse.js, și papaparse.min.js.

Apoi definim controlerul aplicației și apoi legăm controalele HTML la datele aplicației.

Descărcați un fișier CSV

Deoarece deja avem interfața cu linkul în care un utilizator va putea descărca fișierul CSV, acum începem să scriem codul Angular care va conține datele care urmează să fie descărcate și apoi să le legăm cu comenzile HTML.

Apoi, CSV este disponibil pentru descărcare pe partea clientului.

În app.js, inițializați aplicația Angular și definiți CsvCtrl controlor.

"utilizarea strictă"; / * Modulul aplicației * / var app = angular.module ("myApp", []); 

Apoi, definiți datele de probă în JSON și convertiți-le într-un fișier CSV cu ajutorul modulului Papa Parse.

app.controller ("CsvCtrl", ["$ scope", "$ q", functie ($ scope, $ q) var clearAlerts = function () $ scope.error = $ scope.warning = ; $ scope.download = funcția () var a = document.createElement ("a"); var json_pre = '["Referință": " " "Dn": "1980", "Sex": "F",  "Reference": "2", "FIRST_NAME": "Rebbecca", "last_name": "Bellon", "Dn":" 1977 " "Sex": "F",  "Reference": "3", "FIRST_NAME": "Stanley", "last_name": "Benton", "Dn": "1984", "Sex":" M " var 'src = Papa.unparse (json_pre); dacă (window.navigator.msSaveOrOpenBlob) var blob = Blob nou [encodeURI (csv)]], type: text / csv; -8; "); navigator.msSaveBlob (blob, 'sample.csv'); altceva a.href = 'data: attachment / csv; charset = utf-8' + encodeURI (csv); = '_blank'; a.download = 'sample.csv'; document.body.appendChild (a); a.click ();]);

Încărcarea și citirea unui fișier CSV

Aici este funcția Angular care încarcă și citește un fișier CSV.

app.controller ("CsvCtrl", ["$ scope", "$ q", funcția ($ scope, $ q) // ... restul codului // Încărcați și citiți funcția CSV $ scope.submitForm = form) clearAlerts (); var filename = document.getElementById ("bulkDirectFile"); dacă (nume_filează.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 ('lățime', '100%'); var var = e.target.result.split (" \ n "); < rows.length; i++)  var row = $(""); var celule = rânduri [i] .split (", "); pentru (var j = 0; < cells.length; j++)  var cell = $("
") .css ('border', '1px solid negru'); cell.html (cells [j]); row.append (celulă); table.append (rând); $ (" # dvCSV "). html ( "); $ ( "# DvCSV") append (tabelul).;  reader.readAsText (fișierul nume fișiere [0]);  return false; ); 
Aici confirmăm dacă CSV este valid și nu este gol. Dacă este gol sau nu a fost încărcat niciun fișier CSV, îi oferim utilizatorului un mesaj de avertizare: "Vă rugăm să încărcați un fișier." Dacă CSV este valid, convertim datele într-un format de tabel și le prezentăm după cum se arată mai jos.
Conversia unui fișier CSV în JSON
În ultima parte a acestui tutorial, va fi convertită datele CSV în format JSON (un formular care poate fi consumat de un API). Mai jos este funcția care convertește datele CSV în JSON. Vom imprima datele doar la consola, deoarece nu avem un API pentru consumarea datelor.
app.controller ("CsvCtrl", ["$ scope", "$ q", funcția ($ scope, $ q) // ... // Conversia în funcția JSON $ scope.add = function () var Table = document .getElementById ('Tabelul'); var file = document.getElementById ("bulkDirectFile") fișiere [0]; $ (' descărcare: true, header: true, skipEmptyLines: true, eroare: funcția (err, file, inputElem, reason) , completă: funcția (rezultate) allResults.push (results.data) )));]);
În funcția de mai sus, obținem fișierul CSV și îl folosim pe Papa Parse pentru a-l converti în JSON. Codul complet din app.js este prezentat mai jos.
Concluzie
În acest post, ați văzut cum să încărcați și să descărcați date CSV și cum să analizați datele CSV în și din JSON.
Sper că acest tutorial v-a ajutat să înțelegeți cum să manipulați fișierele CSV cu modulul Papa Parse și cât de puternic este această bibliotecă. Simțiți-vă liber să experimentați fișiere mai mari pentru a vedea funcționalitatea completă a bibliotecii Papa Parse. 



		
			
	   
	




Cod


		











	

        
		
Cum se încarcă fișierele cu CodeIgniter și AJAX
			
			
	
			
        				
	
		
	

        
		
Cum se încarcă un PowerPoint pe YouTube în 60 de secunde
			
			

					
        
	






	

	

			

							×