Up next in 10
Node.js Express Project to Convert Excel File XLSX to JSON Using SheetJS and Download it in Browser
Jan 9, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/node-js-express-project-to-convert-excel-file-xlsx-to-json-using-sheetjs-and-download-it-in-browser/
Official Website:
https://freemediatools.com
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video we will look at a tool
0:05
that I developed Excel file to Json so
0:08
in this tutorial we will look at how to
0:10
build this tool in nodejs Express and uh
0:14
we will be using an package in nodejs
0:17
XLS to actually work with Excel file to
0:20
actually convert the data which is
0:21
present inside Excel file to Json this
0:24
is actually a tool that I developed on
0:25
my free media tools website the link is
0:28
given in the description you can check
0:29
out the live demo so this tool allows
0:32
you to actually upload your Excel file
0:35
so whatever data is present inside your
0:37
Excel file it will actually convert that
0:39
data into Json so if I open this Excel
0:43
file you will see all this data will be
0:45
there in this tler format we have these
0:47
headers we have rows columns so all
0:50
these data that if you want to convert
0:52
this into Json format you simp simply
0:54
need to select this file after you
0:56
select it click on download Json file so
0:58
as you click the download button your
1:00
Json file will get downloaded and if I
1:03
open this Excel this Json file you will
1:06
basically see it will actually convert
1:08
this into an array of object each object
1:11
representing one record so this is
1:13
actually segment you can see that
1:15
country product discount band this is a
1:17
second row data this is a third data
1:21
like this you can see that it has
1:22
converted this into a array of objects
1:25
adjacent file right here so we will be
1:27
looking at how to develop this
1:29
application in nodejs Express I will
1:31
show you step by step and for building
1:33
this application I used a package if you
1:37
just search for this package which is
1:39
XLS it's called as
1:42
sheetjs and sheetjs it's Library name
1:47
you can even work it in the browser side
1:49
as well 2 million downloads are there
1:51
you will see that very simple command
1:53
npmi XLS so simply you need to install
1:56
it and I'm also running this server on
1:59
Local Host as as well so if I just show
2:01
you Local Host 3000 I developed this
2:03
locally as well now you can upload the
2:06
same file right here also if I upload
2:09
this file click on convert and download
2:11
Json and now you can see that again
2:14
output. Json will get created and the
2:16
same file will get created so I will now
2:18
show you guys how to build this
2:20
application it's very easy we need to
2:23
install Express EGS monter and XLS so
2:28
these are the four packages which are
2:30
needed Express will be the backend
2:31
server EGS will be the template engine
2:34
molor will be used to actually upload
2:35
files to your server and XLS will be the
2:38
actual Library which will convert the
2:40
Excel file into Json so just install all
2:42
these four packages by using this
2:44
command and after there just make a
2:46
index.js file inside your root directory
2:49
so I will simply delete everything and
2:51
start from scratch just make index.js
2:55
file guys right here inside
3:01
so now to build this application I will
3:04
simply show you step by step how I want
3:07
to develop
3:08
this so the very first thing guys we
3:10
need to do we will delete everything
3:13
from here and start our nodon index.js
3:17
so we have started this file right here
3:20
so for for the very first time here we
3:22
need to Simply make our Express server
3:25
we need to instantiate require it at the
3:28
very top and just make a new Express
3:32
app like
3:37
this so we making a new app and the app
3:41
will listen on port number 5,000 and the
3:45
console log you can simply write a
3:47
message that app is
3:49
listening on Port
3:52
5000 and after this guys we just need to
3:55
Simply set the view engine that we
3:57
installed which is EGS
4:00
so in the next argument EGS so here we
4:03
need to Simply make a views directory
4:05
inside our root directory and inside
4:07
this we need to make a index. ejs
4:11
file not Jes but ejs so let me just
4:15
correct
4:18
that
4:19
index.js it's a simple file HTML file
4:23
right here and you'll give it a title
4:25
which is Excel to Json
4:30
so this will actually be making a simple
4:32
post request guys so right here we can
4:35
simply show this file to the user so
4:38
whenever someone goes to the Home Route
4:40
we can simply show this file to the
4:42
user response.
4:45
uh render index we don't need to write
4:49
the extension so it will someone goes to
4:51
the
4:52
homepage we need to Simply have a simple
4:55
form right here we will give it Excel to
4:58
Json and we simply make a post request
5:01
method post and right here you'll give
5:03
it a label uh we'll simply say ex upload
5:08
Excel
5:10
file so here you will be asking the user
5:13
to Simply upload input type file and you
5:17
will only be accepting Excel file so LX
5:21
XLS and it should be required
5:25
and that's all so we also need to give
5:28
it a name p parameter right here so
5:30
we'll say
5:33
file and then after this we will simply
5:36
have a
5:41
button to
5:43
convert to
5:46
xer convert to Json sorry convert to
5:48
Json so we are making a simple post
5:51
request and also we need to write here
5:53
in coding type multiart form data
5:55
because we are uploading file so this is
5:57
actually a form that you will see if you
5:59
go to the the homepage Local Host
6:02
3,000 okay I think I'm running this on
6:05
Local Host 5,000 I need to change the
6:07
address you will see that you will
6:10
actually see a form right here upload
6:13
Excel file we have a simple form we
6:15
choose file button where we can select
6:17
all Excel file and then we have a button
6:21
right here so we need to Simply make
6:23
this post request from Excel to Json so
6:26
inside our index.js file so right here
6:35
Excel to
6:39
Json so inside this file guys we need
6:44
to make a post request so what I will do
6:48
is that uh we also need to write
6:52
here uh require malor library because we
6:57
do need to upload the file first of all
6:59
before we process it and we also need to
7:03
import this XLS package as well so
7:05
require that also we also need the
7:08
built-in file system module so just
7:10
require it and also the path module as
7:13
well so also requir this also so after
7:17
this guys what we need to do we need to
7:19
set the molter engine so we need to
7:22
Simply say molter is a Constructor and
7:25
here you will be passing the destination
7:27
so where you need to save your file
7:29
after you you upload it we need to store
7:30
it in the uploads directory so this
7:32
directory will automatically get created
7:35
after you upload the file so you don't
7:37
need to manually create this you will
7:40
see automatically it get created we
7:42
haven't created this as I mentioned this
7:44
code right here it automatically got
7:46
created destination after you do this we
7:50
now inside the app. post request we do
7:53
need to say here we need to pass this
7:55
middleware we will be uploading a single
7:57
file
7:59
and we are passing this as a middleware
8:02
if you see we have right written this
8:04
middleware right here M middleware so
8:07
whenever someone makes a post request
8:09
first of all the file will be uploaded
8:11
so here you need to give the same name
8:14
attribute that you have given so we have
8:16
given the name attribute as file so we
8:18
are replacing the same name attribute
8:21
like this and after that request
8:24
response and then we can simply say
8:28
console log request. file path so this
8:31
will actually contain the path of the
8:34
uploaded file so if I just show
8:38
you if I select the file right here
8:41
click on convert to Json so what you
8:43
will see in the command line it has
8:45
printed out the path temporary path that
8:47
it has uploaded this file this is actual
8:50
path that we got right
8:52
here you will see that the file is
8:54
uploaded if you see that the file is
8:57
uploaded so now we need to to process
9:00
this file so what I can do is that we
9:02
can simply have a try catch
9:07
block if I have any sort of error we can
9:10
console log it so in the try catch blog
9:12
guys what we need to do we need to get
9:14
access to the
9:16
workbook XLS and it contains a method of
9:19
read file we'll basically read the whole
9:21
file by using the file
9:24
path that we got so we need to pass
9:27
request. file. paath and then we need to
9:30
get the current sheet number so we can
9:32
do this using workbook do sheet names so
9:36
it will actually contained a array so we
9:38
need to get all the data which is there
9:40
in the Excel file so we can say sheet
9:42
names. reduce it's a array method and
9:46
their sheet
9:49
name it will be Arrow function and right
9:53
here inside this function we need to get
9:55
access to the current worksheet number
9:58
so worksheet
10:00
you can say workbook do sheets again
10:04
this time we can actually pass a sheet
10:06
number so here in square bracket we can
10:08
simply pass the current sheet name that
10:11
we have we are getting this like this so
10:15
here we need to replace this sheet name
10:17
that we are getting and then we need to
10:19
convert this data into Json so we can
10:21
simply say here XLS contains this
10:25
package that we are importing it it
10:27
contains a u and it contains this method
10:31
sheet uncore
10:34
2core Json you can see you can convert
10:37
this into CSV HTML Json all the Texs you
10:41
need to convert this into Json so you
10:42
can simply pass the worksheet like this
10:45
and then sheet name is equal to Json
10:51
data and then after that we just need to
10:53
return ACC right here from it and also
10:56
in the second argument we need to write
10:58
here empty object we need to pass this
11:01
is all that we need to do right here and
11:03
after this we just need to get this Json
11:06
content in a store it in a variable and
11:09
use Json stringy file to actually
11:12
convert this data to a Json object so
11:14
all data null and two that's all it will
11:20
convert all this data which is coming
11:22
right here guys to a Json object because
11:24
we are using json. stringy file so after
11:27
you do this you just need to download
11:30
this file as an attachment so we can
11:32
simply say output path path. jooin in
11:35
the current directory just make this
11:36
fold in the uploads
11:39
directory and we call this as output.
11:42
Json that's all and now to basically
11:45
save this file you can say F FS system
11:48
file system we have this method to
11:50
actually save this at this current
11:52
location with that Json content like
11:56
this and the encoding type is a third
11:59
parameter utf-8 encoding type so we have
12:02
successfully saved
12:04
this after saving it we need to download
12:07
this file so now to download this we can
12:10
say response. download download this
12:13
output path file name will be output.
12:16
Json if any sort of error take place
12:19
this will be the call back
12:20
function if any sort of error take place
12:23
we
12:24
can console log
12:26
it if no error take place then we can
12:29
simply download the
12:30
file we can remove this
12:33
file from the file path after it has
12:36
been
12:37
downloaded so we need to remove this
12:40
file request file. paath and also remove
12:42
this output file as well that's all
12:47
so that's completes the application guys
12:50
and I think I can now go to the
12:53
application Local Host 5,000 if I upload
12:56
a Excel file click on this button you
12:59
will basically see it will download this
13:01
output. Json file and if you
13:04
see uh if I just show you output.
13:11
Json
13:14
uh in the root directory we
13:18
basically so this is actually the
13:20
output. Json file guys we got right here
13:23
and you can see it contains array of
13:25
objects the current sheet number because
13:27
we only have one sheet right right here
13:30
if you see that we only have one sheet
13:32
right here sheet one so it basically
13:34
contains sheet one data it contains
13:36
array of objects right here you can see
13:38
that so each object has a different
13:41
object right here each data has a
13:43
different object so it has converted
13:46
this Excel file to a Json object so in
13:49
this way you can do this and you can
13:50
also try out my free media tools live
13:53
demo as well I deploy this website Excel
13:56
to Json so the link is given in the
13:58
descript deson and if you want the full
14:01
source code you can directly purchase it
14:03
from my website as well all the links
14:05
are given in the description you can
14:07
check out and thank you very much guys
14:09
for watching this video and I will be
14:11
seeing you in the next live stream