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!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TABLE OF CONTENTS

 

 

QUICK NOTES

• Download and unzip into your project folder.
• Install the required modules – npm install express ejs xlsx
• Run node 2-server.js and access http://localhost in your web browser.

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

SCREENSHOT

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

 

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