Excel To HTML Table In NodeJS (Simple Example)

Welcome to a tutorial on how to read an Excel file and display it in an HTML table. So you have just started with NodeJS and need to display an Excel file in the format of an HTML table? Well, let us walk through an example – Read on!

 

 

TABLE OF CONTENTS

 

 

EXAMPLE CODE DOWNLOAD

Source code on GitHub Gist

Just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

 

 

QUICK SETUP

Run npm i express ejs xlsx to install the required modules.

 

 

PART 1) DUMMY EXCEL FILE

Name	Email
Joa Doe	joa@doe.com
Job Doe	job@doe.com
Joe Doe	joe@doe.com
Jon Doe	jon@doe.com
Joy Doe	joy@doe.com

For this example, we will be working with this dummy list of users.

 

 

PART 2) NODEJS EXPRESS SERVER

// (A) LOAD MODULES
const xlsx = require("xlsx"),
      express = require("express");
 
// (B) EXPRESS SERVER & EJS
const app = express();
app.set("view engine", "ejs");
 
// (C) SERVE DEMO PAGE
app.get("/", (req, res) => {
  // (C1) OPEN EXCEL FILE - USE FIRST WORKSHEET
  var workbook = xlsx.readFile("1-dummy.xlsx"),
      worksheet = workbook.Sheets[workbook.SheetNames[0]],
      range = xlsx.utils.decode_range(worksheet["!ref"]);
 
  // (C2) READ EXCEL INTO OBJECT
  var data = [];
  for (let row=range.s.r; row<=range.e.r; row++) {
    data[row] = [];
    for (let col=range.s.c; col<=range.e.c; col++) {
      let cell = worksheet[xlsx.utils.encode_cell({r:row, c:col})];
      data[row].push(cell.v);
    }
  }
 
  // (C3) RENDER HTML TEMPLATE
  res.render("3-demo", { data : data });
});
 
// (D) START!
app.listen(80, () => console.log(`Server running at port 80`));

1. Load the required modules.
2. Create the Express web server. There are many HTML template engines, but we will be using EJS here.
3. Take note of how this works – We will read 1-dunmy.xlsx into an array, then pass it into the HTML template 3-demo.ejs.
4. Start the Express web server. Captain Obvious at your service.

 

 

PART 3) HTML TEMPLATE

<table>
  <% data.forEach(row => { %>
  <tr>
    <% row.forEach(cell => { %>
    <td><%= cell %></td>
    <% }); %>
  </tr>
  <% }); %>
</table>

Lastly, the HTML template should be pretty self-explanatory. We are just looping through the (Excel) array, and generating the table.

 

 

LINKS & REFERENCES

• Express NodeJS Web Server
• SheetJS (Node XLSX) 
• EJS