Hola gente que tal necesito saber si hay manera de leer un Excel desde react y mostrarlo en una tabla , por ahora lo que pude lograr es mostrarlo pero importándolo desde un input , no me sirve porque necesito que al renderizar el componente ya este cargado el Excel … adjunto el código
Lo que me vendría excelente es saber como leer un archivo Excel desde react sin tener que meterlo desde un input
[![ADJUNTO IMAGEN DE LA TABLA CON BOOTSTRAP][1]][1] [1]: https://i.sstatic.net/Rcfc0.png
AQUI ADJUNTO EL CODIGO PARA LEER EL EXCEL DESDE EL INPUT
class Producto extends Component {
state = {
file: [],
};
readExcel = (file) => {
const promise = new Promise((resolve, reject) => {
const fileReader = new FileReader();
fileReader.readAsArrayBuffer(file);
fileReader.onload = (e) => {
const bufferArray = e.target.result;
const wb = XLSX.read(bufferArray, { type: "buffer" });
const wsname = wb.SheetNames[0];
const ws = wb.Sheets[wsname];
const data = XLSX.utils.sheet_to_json(ws);
resolve(data);
this.setState({
file: data,
});
// console.log(this.state);
};
fileReader.onerror = (error) => {
reject(error);
};
});
promise.then((d) => {
// console.log(d)
});
};
AQUI ADJUNTO EL CODIGO QUE SE RENDERIZA
render() {
return (
<div>
<br />
<div className="table-responsive">
<input
type="file"
onChange={(e) => {
const archivo = e.target.files[0];
this.readExcel(archivo);
}}
/>
<table className="table table-striped table-bordered text-center shadow p-3 mb-5 bg-white rounded">
<thead className="table-primary ">
<tr>
<th>Producto</th>
<th>Visitas Totales en Compre</th>
<th>Producto Redireccionado</th>
<th>Categoria</th>
</tr>
</thead>
<tbody>
{this.state.file.map((element) => {
return (
<tr>
<td key={element["Event Category"]}>
{element["Event Category"]}
</td>
<td key={element["Total Events"]}>
{element["Total Events"]}
</td>
<td key={element["Event Label"]}>
{element["Event Label"]}
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
);
}
}
export default Producto;```