Share
Dette innlegget vil vise deg hvordan du laster opp CSV-filer data til AngularJS, les dataene, og konverter deretter til JSON for behandling. Deretter ser du hvordan du gjør alt i revers og laster ned en CSV-datadump fra AngularJS.
CSV-filer er foretrukne på grunn av deres enkelhet. De støttes også mye av mange typer programmer og gir en enkel måte å representere regnearkdata på.
Før du begynner med denne opplæringen, må du kontrollere at du har Node.js installert på datamaskinen. Hvis du ikke har det ennå, gå over til den offisielle nettsiden og installer den.
Du bør også ha en grunnleggende forståelse av følgende teknologier:
Hvis du allerede har Node.js installert, må du kontrollere om du har de nyeste versjonene av Node og NPM.
node -v npm -v
Det er flere måter å manipulere CSV på Angular, og de inkluderer:
Accentsconagua
csvtojson: Dette er en nodepakke som også er enkel å bruke.Fil eller blob objekter å spesifisere filen som skal leses. Dette er imidlertid ikke en effektiv måte fordi du fortsatt må gå gjennom alle linjene i CSV og deretter JSON.stringify resultatene.Målet vårt er å kunne gjøre følgende:
Grensesnittet vårt bør se slik ut:
Vi starter først ved å skrive HTML-koden for grensesnittet som er vist ovenfor.
Opprett en mappe som heter mitt prosjekt, cd inn i prosjektmappen, og opprett to filer: home.html og app.js.
mkdir my_project cd my_project touch home.html berør app.js
Siden vi skal bruke Papa Parse-modulen, gå over til det offisielle nettstedet og last ned biblioteket. Deretter pakke inn innholdet og lagre papaparse.js og papaparse.min.js filer i prosjektmappen din. Prosjektstrukturen din bør se slik ut:
my_project / app.js home.html papaparse.js papaparse.min.js
Nedenfor er HTML-koden for å skape grensesnittet vårt. Lagre det som home.html.
- Excel-filen skal inneholde tre kolonner
- Den første kolonnen inneholder Henvisning
- Den andre kolonnen inneholder Fornavn
- Den tredje kolonnen inneholder Etternavn
- Den andre kolonnen inneholder Fødselsdato
- Den tredje kolonnen inneholder Kjønnav personen
Kolonneoverskriftene skal være Henvisning ,Fornavn ,Etternavn,Dob,Kjønn
En prøvefil er tilgjengelig for nedlasting
Din opplastede CSV-fil vil bli vist til deg i en forhåndsvisning for Bekreftelse
I koden ovenfor bruker vi ng-app direktiv for å definere vår søknad. Vi legger deretter til AngularJS og jQuery-biblioteker til vår nettside, så vel som resten av skriptfilene, dvs.. app.js, papaparse.js, og papaparse.min.js.
Vi definerer deretter programmets kontroller og bind deretter HTML-kontrollene til programdataene.
Siden vi allerede har grensesnittet med koblingen der en bruker vil kunne laste ned CSV-filen, fortsetter vi nå å skrive Angular-koden som inneholder dataene som skal lastes ned, og bind deretter den med HTML-kontrollene.
Vi gjør deretter CSV tilgjengelig for nedlasting på klientsiden.
I app.js, initialiser Angular app og definer CsvCtrl kontrolleren.
'bruk streng'; / * App Module * / var app = angular.module ("myApp", []); Deretter definerer du prøvedataene i JSON og konverterer det til en CSV-fil ved hjelp av Papa Parse-modulen.
app.controller ("CsvCtrl", ["$ scope", "$ q", funksjon ($ omfang, $ q) var clearAlerts = function () $ scope.error = , $ scope.warning = null ; $ scope.download = function () var a = document.createElement ("a"); var json_pre = '["Referanse": "1", "Fornavn": "Lauri", "Last_name": "Amerman " "Dob": "1980", "Sex": "F", "Reference": "2", "First_Name": "Rebbecca", "last_name": "Bellon", "Dob":" 1977 " "Sex": "F", "Reference": "3", "First_Name": "Stanley", "last_name": "Benton", "Dob": "1984", "Sex":" M "cs = cpa; csv = Papa.unparse (json_pre); hvis (window.navigator.msSaveOrOpenBlob) var blob = ny Blob ([decodeURIComponent (encodeURI (csv))], type:" text / csv; charset = utf -8; "); navigator.msSaveBlob (blob, 'sample.csv'); else a.href = 'data: vedlegg / csv; charset = utf-8,' + encodeURI (csv); = '_blank'; a.download = 'sample.csv'; document.body.appendChild (a); a.click ();]);Her er Angular-funksjonen som laster opp og leser en CSV-fil.
app.controller ("CsvCtrl", ["$ scope", "$ q", funksjon ($ omfang, $ q) // ... resten av koden // Last opp og les CSV-funksjon $ scope.submitForm = funksjon skjema) clearAlerts (); var filename = document.getElementById ("bulkDirectFile"); hvis (filnavn.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 = $("Her bekrefter vi om CSV er gyldig og ikke tom. Hvis den er tom eller ingen CSV-fil er lastet opp, gir vi brukeren en advarsel: "Last opp en fil." Hvis CSV er gyldig, konverterer vi dataene til et tabellformat og presenterer det som vist nedenfor.
I den siste delen av denne opplæringen konverteres CSV-dataene til JSON-format (et skjema som kan brukes av en API). Nedenfor er funksjonen som konverterer CSV-data til JSON. Vi vil kun skrive ut dataene til konsollen, siden vi ikke har en API for bruk av dataene.
app.controller ("CsvCtrl", ["$ scope", "$ q", funksjon ($ omfang, $ q) // ... // Konverter til JSON-funksjonen $ scope.add = function () var Tabell = dokument .getElementById ('Table'); var fil = document.getElementById ("bulkDirectFile") .filer [0]; $ ('loading'). show (); var allResults = []; Papa.parse (fil, Last ned: true, header: true, skipEmptyLines: true, error: funksjon (feil, fil, inputElem, reason) , fullfør: funksjon (resultater) allResults.push (results.data); console.log ));]);I funksjonen ovenfor får vi CSV-filen og bruker Papa Parse til å konvertere den til JSON. Den komplette koden i app.js er vist nedenfor.
I dette innlegget så du hvordan du laster opp og laster ned CSV-data, og hvordan du analyserer CSV-data inn og ut av JSON.
Jeg håper denne opplæringen har hjulpet deg med å forstå hvordan du kan manipulere CSV-filer med Papa Parse-modulen og hvor kraftig det biblioteket er. Du kan eksperimentere med større filer for å se full funksjonalitet i Papa Parse-biblioteket.
