Share
I det här inlägget visas hur du laddar upp CSV-filer till AngularJS, läser data och konverterar sedan till JSON för bearbetning. Då ser du hur man gör det hela i omvänd och laddar ner en CSV-datadump från AngularJS.
CSV-filer föredras på grund av deras enkelhet. De stöds också allmänt av många typer av program och ger ett enkelt sätt att representera kalkylarkdata.
Innan du börjar med denna handledning, kontrollera att du har Node.js installerat på din dator. Om du inte har det ännu, gå över till den officiella hemsidan och installera den.
Du bör också ha en grundläggande förståelse för följande tekniker:
Om du redan har Node.js installerat, kontrollera om du har de senaste versionerna av Nod och NPM.
nod -v npm -v
Det finns flera sätt att manipulera CSV i Angular, och de inkluderar:
Accentsconagua
csvtojson: Detta är ett nodpaket som också är enkelt att använda.Fil eller Klick objekt att ange filen som ska läsas. Det här är emellertid inte ett effektivt sätt eftersom du fortfarande måste slinga igenom alla rader i CSV och sedan JSON.stringify resultaten.Vårt mål är att kunna göra följande:
Vårt gränssnitt ska se ut så här:
Vi börjar först genom att skriva HTML-koden för gränssnittet som visas ovan.
Skapa en mapp som heter mitt projekt, CD in i projektmappen och skapa två filer: home.html och app.js.
mkdir my_project cd my_project touch home.html touch app.js
Eftersom vi använder Papa Parse-modulen, gå över till den officiella webbplatsen och hämta biblioteket. Därefter extrahera innehållet och spara papaparse.js och papaparse.min.js filer i din projektmapp. Din projektstruktur ska se ut så här:
my_project / app.js home.html papaparse.js papaparse.min.js
Nedan är HTML-koden för att skapa vårt gränssnitt. Spara det som home.html.
- Excel-filen ska innehålla tre kolumner
- Den första kolumnen innehåller Referens
- Den andra kolumnen innehåller Förnamn
- Den tredje kolumnen innehåller Efternamn
- Den andra kolumnen innehåller Födelsedatum
- Den tredje kolumnen innehåller Sexav personen
Kolumnrubrikerna ska vara Referens ,Förnamn ,Efternamn,Dob,Sex
En provfil finns tillgänglig för nedladdning
Din uppladdade csv-fil visas i en förhandsgranskning för Bekräftelse
I koden ovan använder vi ng-app direktiv för att definiera vår ansökan. Vi lägger sedan till AngularJS och jQuery-biblioteken på vår webbsida, liksom resten av manusfilerna, dvs. app.js, papaparse.js, och papaparse.min.js.
Vi definierar sedan programmets kontroller och sedan binder HTML-kontrollerna till applikationsdata.
Eftersom vi redan har gränssnittet med länken där en användare kommer att kunna ladda ner CSV-filen fortsätter vi nu att skriva den Angular-kod som innehåller de data som ska hämtas och binda sedan den med HTML-kontrollerna.
Vi gör sedan CSV tillgängligt för nedladdning på klientsidan.
I app.js, initiera Angular app och definiera CsvCtrl kontrollant.
använd strikt / * Appmodul * / var app = angular.module ("myApp", []); Definiera sedan provdata i JSON och konvertera den till en CSV-fil med hjälp av Papa Parse-modulen.
app.controller ("CsvCtrl", ["$ scope", "$ q", funktionen ($ scope, $ q) var clearAlerts = function () $ scope.error = , $ scope.warning = null ; $ scope.download = function () var a = document.createElement ("a"); var json_pre = '["Referens": "1", "Förnamn": "Lauri", "Senast namn": "Amerman " "Dob": "1980", "Sex": "F", "Referens": "2", "förnamn": "Rebbecca", "LAST_NAME": "Bellon", "Dob":" 1977 " "Sex": "F", "Referens": "3", "förnamn": "Stanley", "LAST_NAME": "Benton", "Dob": "1984", "Sex":" M var blob = nytt blob ([decodeURIComponent (encodeURI (csv))], typ: "text / csv; charset = utf -8; "); navigator.msSaveBlob (blob, 'sample.csv'); annat a.href = 'data: bilaga / csv; charset = utf-8,' + encodeURI (csv); = '_blank'; a.download = 'sample.csv'; document.body.appendChild (a); a.click ();]);Här är vinkelfunktionen som laddar upp och läser en CSV-fil.
app.controller ("CsvCtrl", ["$ scope", "$ q", funktion ($ scope, $ q) // ... resten av koden // Ladda upp och läs CSV-funktion $ scope.submitForm = function blankett < 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 = $("Här bekräftar vi om CSV är giltigt och inte tomt. Om det är tomt eller ingen CSV-fil har laddats upp, ger vi användaren ett varningsmeddelande: "Var god ladda upp en fil." Om CSV är giltigt konverterar vi data till ett tabellformat och presenterar det enligt nedan.
I den sista delen av denna handledning konverteras CSV-data till JSON-format (ett formulär som kan konsumeras av ett API). Nedan är den funktion som konverterar CSV-data till JSON. Vi kommer endast skriva ut data till konsolen eftersom vi inte har ett API för att konsumera data.
app.controller ("CsvCtrl", ["$ scope", "$ q", funktionen ($ scope, $ q) // ... // Konvertera till JSON-funktionen $ scope.add = function () var Tabell = dokument .getElementById ('Table'); Var file = document.getElementById ("bulkDirectFile") .filer [0]; $ ('loading'). Visa (); var allResults = []; Papa.parse download: true, header: true, skipEmptyLines: true, error: funktion (err, fil, inputElem, reason) , komplett: funktion (resultat) allResults.push (results.data); console.log ));]);I funktionen ovan får vi CSV-filen och använder Papa Parse för att konvertera den till JSON. Den fullständiga koden i app.js visas nedan.
I det här inlägget såg du hur man laddar upp och laddar ner CSV-data och hur man analyserar CSV-data till och från JSON.
Jag hoppas att denna handledning har hjälpt dig att förstå hur man kan hantera CSV-filer med Papa Parse-modulen och hur kraftfullt det här biblioteket är. Känn dig fri att experimentera med större filer för att se Papa Parse-bibliotekets fullständiga funktionalitet.
