CSV significa valores separados por comas es el formato de archivo más popular para intercambiar información o datos entre lenguajes de programación cruzados. También puedes utilizar CSV para almacenar información en hoja de cálculo o base de datos.

En este tutorial vas a ver como leer archivos CSV usando Papa parse library. Papa parse es la librería más rápida para analizar CSV desde el navegador con javascript. Puedes ver algunas demostraciones de como funciona esta librería en acción desde su página oficial.

Características de Papa Parse

  • Fácil de usar y rápido analizador de CSV
  • Analizar archivos CSV directamente (local o en la red)
  • Transmitir archivos grandes (incluso a través de HTTP)
  • Análisis inverso (convierte JSON a CSV)
  • Detectar automáticamente el delimitador
  • Soporte de filas de encabezado
  • Pausa, reanudar, anular
  • Puede convertir números y booleanos a sus tipos
  • Integración jQuery opcional para obtener archivos de elementos  <input type="file">

Leer archivo CSV usando Papa Parse

Paso 1: Agrega la librería Papa parse y jQuery a tu proyecto

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="papaparse.min.js"></script>

Paso 2: Crea un formulario que contenga un input para la subida del fichero CSV. Identificamos el input mediante un ID único.




<form class="form-inline">
	


<div class="form-group">
	  <label for="files">Upload a CSV formatted file:</label>
	  <input type="file" id="files" class="form-control" accept=".csv" required />
	</div>



	


<div class="form-group">
	 <button type="submit" id="submit-file" class="btn btn-primary">Upload File</button>
	 </div>



</form>



En el input HTML5 de tipo fichero usado en el formulario se define que el archivo de carga de entrada de campo es un campo obligatorio y permite elegir el archivo con formato CSV.

Paso 3: Inicializa Papa Parse para analizar el archivo CSV y configura los parámetros de configuración.

$('#submit-file').on("click",function(e){
	e.preventDefault();
	$('#files').parse({
		config: {
			delimiter: "auto",
			complete: displayHTMLTable,
		},
		before: function(file, inputElem)
		{
			//console.log("Parsing file...", file);
		},
		error: function(err, file)
		{
			//console.log("ERROR:", err, file);
		},
		complete: function()
		{
			//console.log("Done with all files");
		}
	});
});

Cuando el botón de enviar el archivo sea pulsado se ejecutará el código JavaScript aplicando la configuración definida según los parámetros dados en la inicialización. Parámetros como el delimitador, función de llamada al completar la lectura del archivo, handlers, etc.

Paso 4: Mostrar los datos leidos del archivo CSV.

function displayHTMLTable(results){
	var table = "


<table class='table'>";
	var data = results.data;
	 
	for(i=0;i<data.length;i++){
		table+= "


<tr>";
		var row = data[i];
		var cells = row.join(",").split(",");
		 
		for(j=0;j<cells.length;j++){
			table+= "


<td>";
			table+= cells[j];
			table+= "</th>



";
		}
		table+= "</tr>



";
	}
	table+= "</table>



";
	$("#parsed_csv_list").html(table);
}

Con esta función se esta iterando los datos del archivo csv y generando dinámicamente una tabla html con sus datos.

 

Comparte el post