Como obtener datos de un Excel con React
En este nuevo post os indicare como poder obtener los datos de un archivo Excel (.xlsx) con React.
Lo primero es crear nuestro proyecto de React, en este caso yo usaré el comando npx create-react-app.
Una vez tengamos nuestro proyecto creado correctamente, crearemos nuestro componente donde vamos a obtener los datos de nuestro Excel. En este caso yo he decidido llamarlo ExcelComponent.jsx, tú puedes darle el nombre que veas oportuno.
Ahora tendremos que importar nuestro componente dentro de App.js para poder visualizarlo en nuestra aplicación y nos debería quedar tal que así.
Ahora, ya con nuestro componente creado vamos a instalar la librería que nos ayudará a leer nuestro documento, vamos a instalarla vía npm con el comando npm install xlsx.
Si deseas ver la documentación oficial de la librería te la facilito en este enlace xlsx – npm (npmjs.com)
Ahora que ya tenemos instalada nuestra librería vamos a importarla en nuestro componente escribiendo import * as XLSX from ‘xlsx en los imports de nuestro componente.
Ahora lo que haremos será hacer un formulario para poder subir nuestro fichero, lo imprescindible para poder leer el fichero es que nuestro input sea de tipo file y su atributo accept sea «application/vnd.openxmlformats-officedocument.spreadsheetml.sheet» para que el usuario solamente pueda subir archivos con extensión xlsx y así evitar errores. Debería quedar algo como esto
Ahora arrancaremos el servidor de nuestra aplicación con el comando npm start para ver que todo se muestre correctamente, en nuestra pantalla deberíamos ver algo tal que así.
Una vez logremos visualizar todo esto correctamente comenzaremos a desarrollar nuestra función.
Lo primero que haremos será declararnos dos variables de estado llamadas file y excelData.
El primer método que crearemos será handleFileChange(e), que se usara para actualizar el archivo que el usuario sube a nuestro input.
Este será llamado con el método change de nuestro input.
Ahora escribiremos la función handleFileUpload(e) que realizara la lectura de nuestro archivo siempre y cuando el usuario haya subido alguno. Leeremos el archivo Excel una vez este cargado, dentro de este lo que haremos será leer la primera página de nuestro fichero, y con el método XLSX.utils.sheet_to_json(sheet, { header: 0 }) convertiremos nuestros datos a JSON y haremos que nuestra variable excelData tenga el JSON resultante.
Los datos de la variable jsonData deberían visualizarse así si hacemos un console.log(jsonData)
Ahora haremos que este método sea llamado cada vez que nuestro formulario sea enviado, así que mediante nuestro evento submit haremos que llame a la función handleFileUpload(), así que nuestro formulario quedaría tal que así.
Ahora que ya hemos obtenido los datos del Excel vamos a mostrarlos en una tabla. Así que debajo de nuestro formulario dibujaremos la tabla con los datos que solo mostraremos si el Excel contiene datos.
Con el Object.keys obtenemos las claves de los valores de los objetos que contiene nuestra variable excelData, que corresponden a los nombres de las columnas que estaban escritas en nuestro fichero.
Luego para mostrar los datos mapeamos la variable excelData y con Object.values solo recogemos los valores de las columnas que es lo que nos interesa.
Y si hemos hecho todo correctamente Deberíamos ver algo tal que así una vez subamos el archivo y pulsemos el botón.
GitHub: CristopherJmnz/lecturaexcel (github.com)
LinkedIn: https://www.linkedin.com/in/cristopher-jimenez-jimenez/
Autor/a: Cristopher Jiménez Jiménez
Curso: Desarrollo Web Full Stack + MultiCloud con Azure y AWS
Centro: Tajamar Tech
Año académico: 2023-2024