En el día de hoy aprenderemos a leer y analizar un archivo excel con Node.js (usando código moderno) y Handlebars para el motor de plantillas, estaremos usando como framework de css Bootstrap y el módulo que nos ayudara a gestionar el excel sera read-excel-file, en este link pueden leer acerca de su documentación https://www.npmjs.com/package/read-excel-file

NODE.js

Empezaremos creando una carpeta en nuestro escritorio node-exel-reader/ y activando la consola de nuestro editor de código favorito, e instalaremos las siguientes dependencias:


npm init --yes


npm i express express-handlebars  multer  fs-extra  read-excel-file


npm i --save-dev @babel/node @babel/core @babel/cli @babel/preset-env nodemon

Creamos un archivo llamado .babelrc con lo siguiente:


{
    "presets" : [
        "@babel/env"
    ]
}

configuramos el archivo package.json con lo siguiente:


"dev": "nodemon src/index.js --exec babel-node",
    "start": "node build/index.js"

index.js


import app from './app'
app.listen(app.get('PORT'), () => {
    console.log('Server on port:', app.get('PORT'))
})

app.js


import express from "express";
import path from "path";
import exphbs from "express-handlebars";
import multer from "multer";
import fs from "fs-extra";
import xlsxFile from "read-excel-file/node";
//INITIALIZATIONS
const app = express();
app.set("PORT", process.env.PORT || 3000);
app.set("views", path.join(__dirname, "views"));
app.engine(
  ".hbs",
  exphbs({
    defaultLayout: "main",
    layoutsDir: path.join(app.get("views"), "layouts"),
    partialsDir: path.join(app.get("views"), "partials"),
    extname: ".hbs"
  })
);
app.set("view engine", ".hbs");
// MIDDLEWARES
app.use(express.urlencoded({ extended: false }));
app.use(express.json());
const storage = multer.diskStorage({
  destination: path.join(__dirname, "public/uploads"),
  filename: (req, file, cb) => {
    cb(null, new Date().getTime() + path.extname(file.originalname));
  },
});
app.use(multer({ storage }).single("file"));
// ROUTES
app.get("/", (req, res) => {
  res.render("home");
});
app.post("/process", async (req, res) => {
  const data = await xlsxFile(req.file.path);
  let empleados = [];
  for (var i in data) {
    if (i != 0) {
      var empleado = {
        nombre: data[i][0],
        cargo: data[i][1],
        salario: data[i][2],
      };
      empleados.push(empleado); 
    }
  }
  await fs.remove(req.file.path);
  res.render("success", { empleados });
});
app.use(express.static(path.join(__dirname,'public')))
export default app;

Creamos una carpeta views/ y dentro dos carpetas mas (layouts/ y partials/)

views/layouts/main.hbs


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutorial - Aprende a leer un archivo excel y obtener sus datos con NODE</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
    {{> navigation }}
    <div class="container pt-4">
        {{{ body }}}
        <div class="pt-5 mt-5">
             {{> footer }}
        </div>
    </div>
</body>
</html>

views/partials/navigation.hbs


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid container">
    <a class="navbar-brand" href="/">INICIO >> <a target="_blank" href="https://hive.blog/@jfdesousa7"><small>JFdesousa7</small></a>
  </div>
</nav>

views/home.hbs


<h1 class="text-center">Tutorial - Aprende a leer un archivo excel y obtener sus datos con <b class="text-danger">NODE.js</b></h1>
<div class="row pt-4">
            <div class="col-md-5 mx-auto">
                <div class="card">
                    <div class="card-body">
                        <form method="POST" action="process/" enctype="multipart/form-data">
                            <div class="mb-2">
                                <label for="formFile" class="form-label">Adjuntar Excel</label>
                                <input required class="form-control" type="file" id="formFile" name="file" accept=".xlsx,.csv">
                            </div>
                            <div class="d-grid gap-2 mt-5"><button type="submit" class="btn btn-primary btn-block" >Procesar</button></div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

views/success.hbs


<h1 class="p-4">LISTADO DE EMPLEADOS</h1>
<table class="table">
    <tr>
        <th>NOMBRE</th>
        <th>CARGO</th>
        <th>SALARIO</th>
    </tr>
    {{#each empleados}}
        <tr>
            <td>{{nombre}}</td>
            <td>{{cargo}}</td>
            <td>{{salario}} $</td>
        </tr>
    {{/each}}
</table>

Para este ejemplo se uso el siguiente archivo Excel:

Ver demo en vivo de este ejemplo https://excel-reader-node-app.herokuapp.com/

Y con esa amigos llegamos al final del tutorial, espero que lo hayan disfrutado y hasta la próxima!

Visita mi sitio web oficial para presupuestos y mucho más

TupaginaOnline.net

Tutorial - Aprende a leer un archivo excel y obtener sus datos con Node.js

NODE.js

Ver demo en vivo de este ejemplo https://excel-reader-node-app.herokuapp.com/

Y con esa amigos llegamos al final del tutorial, espero que lo hayan disfrutado y hasta la próxima!

Visita mi sitio web oficial para presupuestos y mucho más