Esta publicación le mostrará cómo cargar datos de archivos CSV en AngularJS, leer los datos y luego convertirlos a JSON para su procesamiento. Luego, verá cómo hacer todo el proceso a la inversa y descargará un volcado de datos CSV desde AngularJS.
Se prefieren los archivos CSV debido a su simplicidad. También son ampliamente compatibles con muchos tipos de programas y proporcionan una forma directa de representar datos de hojas de cálculo..
Antes de comenzar con este tutorial, asegúrese de tener Node.js instalado en su computadora. Si aún no lo tiene, diríjase al sitio web oficial e instálelo..
También debe tener un conocimiento básico de las siguientes tecnologías:
Si ya tiene instalado Node.js, verifique si tiene las últimas versiones de Node y NPM.
nodo -v npm -v
Hay varias formas de manipular CSV en Angular, e incluyen:
csvtojson
: Este es un paquete de nodo que también es fácil de usar.Expediente
o Gota
Objetos para especificar el archivo a leer. Sin embargo, esta no es una forma eficiente porque todavía tiene que recorrer todas las líneas del CSV y luego JSON.stringify
Los resultados.Nuestro objetivo es poder hacer lo siguiente:
Nuestra interfaz debe verse algo como esto:
Primero comenzaremos escribiendo el código HTML para la interfaz que se muestra arriba.
Crea una carpeta llamada mi proyecto, discos compactos
en la carpeta del proyecto, y crea dos archivos: home.html y app.js.
mkdir my_project cd my_project touch home.html touch app.js
Ya que usaremos el módulo Papa Parse, diríjase al sitio oficial y descargue la biblioteca. A continuación, extraiga los contenidos y guarde el papaparse.js y papaparse.min.js archivos en su carpeta de proyectos. La estructura de su proyecto debe verse así:
my_project / app.js home.html papaparse.js papaparse.min.js
A continuación se muestra el código HTML para crear nuestra interfaz. Guardalo como home.html.
ROPA A GRANEL
- El archivo de Excel debe contener tres columnas.
- La primera columna contiene el Referencia
- La segunda columna contiene la Nombre de pila
- La tercera columna contiene la Apellido
- La segunda columna contiene la Fecha de nacimiento
- La tercera columna contiene la Sexode la persona
Los encabezados de las columnas deben ser Referencia ,Nombre de pila ,Apellido,Dob,Sexo
Un archivo de muestra está disponible para descargar
Su archivo csv cargado se le mostrará en una vista previa para la confirmación
En el código anterior, usamos el ng-app Directiva para definir nuestra aplicación. Luego, agregamos las bibliotecas AngularJS y jQuery a nuestra página web, así como el resto de los archivos de script, es decir,. app.js, papaparse.js, y papaparse.min.js.
Luego definimos el controlador de la aplicación y luego unimos los controles HTML a los datos de la aplicación..
Como ya tenemos la interfaz con el enlace donde un usuario podrá descargar el archivo CSV, ahora procederemos a escribir el código Angular que contendrá los datos que se descargarán y luego lo vincularemos con los controles HTML..
A continuación, hacemos que el CSV esté disponible para descargar en el lado del cliente..
En app.js, Inicializa la aplicación Angular y define la CsvCtrl
controlador.
'uso estricto'; / * App Module * / var app = angular.module ("myApp", []);
A continuación, defina los datos de muestra en JSON y conviértalos en un archivo CSV con la ayuda del módulo Papa Parse.
app.controller ("CsvCtrl", ["$ scope", "$ q", función ($ 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 "," Sexo ":" F ", " Referencia ":" 2 "," Nombre ":" Rebbecca "," Apellido ":" Bellon "," Dob ":" 1977 "," Sexo ":" F ", " Referencia ":" 3 "," Nombre ":" Stanley "," Apellido ":" Benton "," Dob ":" 1984 "," Sexo ":" M "] 'var csv = Papa.unparse (json_pre); if (window.navigator.msSaveOrOpenBlob) var blob = new Blob ([decodeURIComponent (encodeURI (csv))], tipo:" 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 ();]);
Aquí está la función Angular que carga y lee un archivo CSV.
app.controller ("CsvCtrl", ["$ scope", "$ q", función ($ scope, $ q) // ... el resto del código // Cargar y leer la función CSV $ scope.submitForm = función ( form) clearAlerts (); var filename = document.getElementById ("bulkDirectFile"); if (filename.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 = $("
Aquí, confirmamos si el CSV es válido y no está vacío. Si está vacío o no se ha cargado ningún archivo CSV, le damos al usuario un mensaje de advertencia: "Cargue un archivo". Si el CSV es válido, convertimos los datos a un formato de tabla y los presentamos como se muestra a continuación..
En la última parte de este tutorial, se convertirán los datos CSV al formato JSON (un formulario que puede ser consumido por una API). A continuación se muestra la función que convierte los datos CSV a JSON. Solo imprimiremos los datos en la consola ya que no tenemos una API para consumir los datos.
app.controller ("CsvCtrl", ["$ scope", "$ q", función ($ scope, $ q) // ... // Convertir a la función JSON $ scope.add = function () var Table = document .getElementById ('Tabla'); 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 ));]);
En la función anterior, obtenemos el archivo CSV y usamos Papa Parse para convertirlo a JSON. El código completo en app.js
se muestra a continuación.
En esta publicación, vio cómo cargar y descargar datos CSV y cómo analizar los datos CSV dentro y fuera de JSON.
Espero que este tutorial te haya ayudado a entender cómo manipular archivos CSV con el módulo Papa Parse y cuán poderosa es esa biblioteca. Siéntase libre de experimentar con archivos más grandes para ver la funcionalidad completa de la biblioteca Papa Parse.