Cargar un fichero XLS (Excel) usando Javascript en React

Tiempo de lectura: < 1 minuto

Hoy vamos a aprender cómo podemos cargar un fichero XLS de Excel usando React.

Lo primero que tenemos que hacer es instalar la librería xlsx:

npm install xlsx

Una vez instalado creamos nuestra función de carga XLSLoader

import * as XLSX from 'xlsx';

async function loadExcelData() {
    const response = await fetch('nuestra_ruta_al_xls.xls');
    const arrayBuffer = await response.arrayBuffer();
    const data = new Uint8Array(arrayBuffer);
    const workbook = XLSX.read(data, { type: 'array' });
    const sheet_name_list = workbook.SheetNames;
    const jsonData = XLSX.utils.sheet_to_json(workbook.Sheets[sheet_name_list[0]]);
    return jsonData;
}

loadExcelData().then(data => {
    console.log(data); // Aquí puedes hacer lo que necesites con los datos
});

Aquí indicamos la ruta correcta al archivo: nuestra_ruta_al_xls.xls

Si queremos hacer un componente independiente:

import * as XLSX from 'xlsx';

export async function loadExcelDataFunc(filePath) {
    const response = await fetch(filePath);
    const arrayBuffer = await response.arrayBuffer();
    const data = new Uint8Array(arrayBuffer);
    const workbook = XLSX.read(data, { type: 'array' });
    const sheet_name_list = workbook.SheetNames;
    const jsonData = XLSX.utils.sheet_to_json(workbook.Sheets[sheet_name_list[0]]);
    return jsonData;
}  

Y para utilizarlo:

        loadExcelDataFunc('../xls/ATC_Spanish.xls').then((data) => {
            console.log(data);
        });