Cómo cargar y descargar archivos CSV con AngularJS

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..

Prerrequisitos

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:

  • HTML
  • CSS
  • JavaScript

Si ya tiene instalado Node.js, verifique si tiene las últimas versiones de Node y NPM.

nodo -v npm -v

Módulos CSV en Angular

Hay varias formas de manipular CSV en Angular, e incluyen:

  • Papa parse: Papa Parse es un potente analizador CSV que es capaz de analizar cadenas CSV en archivos grandes y pequeños, así como de convertir a JSON. Usaremos esta biblioteca en este tutorial.
  • csvtojson: Este es un paquete de nodo que también es fácil de usar.
  • Lector de archivos: Se usa para leer el contenido de archivos usando 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.

Empezando

Nuestro objetivo es poder hacer lo siguiente:

  • descargar un archivo CSV en el lado del cliente
  • subir un archivo CSV
  • leer un archivo CSV
  • convertir los datos del archivo CSV a JSON para su procesamiento

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
  1. El archivo de Excel debe contener tres columnas.
  2. La primera columna contiene el Referencia
  3. La segunda columna contiene la Nombre de pila
  4. La tercera columna contiene la Apellido
  5. La segunda columna contiene la Fecha de nacimiento
  6. 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



Confirme el archivo que desea cargar y haga clic en el botón Continuar a continuació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..

Descargar un archivo CSV

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 ();]);

Cargar y leer un archivo CSV

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 = $("") .css ('width', '100%'); var rows = e.target.result.split (" \ n "); para (var i = 0; i < rows.length; i++)  var row = $(""); var celdas = filas [i] .split (", "); para (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"). append (tabla); reader.readAsText (filename.files [0]); falso retorno; ]);

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..

Convertir un archivo CSV a JSON

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.

Conclusió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.