0

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;```


1 respuesta 1

1

Puedes usar esto para crear tu File en JS, si lo tienes en un servidor solamente debes hacer el request pertinente pero el proceso sería el mismo.

var f = new File([""], "filename.txt", {type: "text/plain", lastModified: date})

De esto también puedes obtener un Blob para facilitar su lectura en cualquier parte.

1
  • y luego donde lo puedo llamar para que me funcione cuando renderiza? Commented el 24 mar. 2021 a las 0:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.