Up next in 10
Angular 13 Export HTML5 Table to Excel (.XLSX) File and Download it Using xlsx Library in TypeScript
Dec 22, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/angular-13-export-html5-table-to-excel-xlsx-file-and-download-it-using-xlsx-library-in-typescript/
Show More Show Less View Video Transcript
0:07
Uh hello friends, today in this tutorial
0:09
I will be telling you that how to export
0:12
HTML 5 table data to uh Excel file. So
0:17
basically this is the application which
0:18
is built using angular 13 and basically
0:21
you can see there are four columns out
0:24
there which is ID, name, username and
0:27
email. So there are five rows. So this
0:31
is the data that we will be export to
0:34
Microsoft Excel file and there is a
0:37
simple button out there which is there
0:39
which if I press this button all this
0:42
data will be converted to Excel file and
0:44
the file will be downloaded. Let me just
0:46
press this button. So as I press this
0:49
button you will see that guys the file
0:50
will be downloaded as a attachment. So
0:54
this is the excel file Excel SX. If I
0:57
open this, you can see that this data is
1:00
converted to Excel file. You can see
1:04
this is Excel viewer. You can see the
1:06
software. So it contains ID, name,
1:10
username, email. So again if you hit it,
1:14
you will see that this is creating that
1:16
exporting this data. So you can contain
1:18
as many rows, as many columns as you
1:21
want. So for converting this guys we are
1:24
using a very special library which is
1:26
called as XLS. So if you search for this
1:29
package this is a package which is we
1:32
are using. So it is over one million
1:36
weekly downloads. So it's a very popular
1:39
module.
1:42
So this is its official website.
1:46
So there is a simple command guys you
1:48
need to install it. npmixlx.
1:51
I have written a complete blog post on
1:53
my website coding six. So if you face
1:55
any sort of problem if you want the full
1:58
source code you can refer the blog post.
2:00
So all the step-by-step instruction is
2:02
given. So just just go to the edit
2:05
option and uh you will find out this uh
2:08
blog post. So now to start this
2:12
application guys you need to first of
2:14
all make a new angular project and uh
2:18
just install this dependency excel
2:21
sx. So install this and after that
2:24
simply start your angular application.
2:28
So let me delete all this code guys and
2:30
start from scratch.
2:34
So there will be nothing here. You will
2:36
now see project is empty right now. So
2:39
just go to your app do.component html
2:41
file and we will start writing the code
2:44
here.
2:46
So the here first of all guys we will
2:48
have a simple div.
2:51
So
2:53
inside this div we will have a simple
2:55
button. So which will say to export to
2:58
excel.
3:01
So here we need to simply write the
3:04
event handler. So when we click this
3:06
button so this function will execute
3:08
which is export excel. So we will write
3:11
this function here.
3:14
So after this we will have a simple
3:16
table
3:18
and uh inside this we will have table
3:21
row. So there will be four columns out
3:24
there. First one is for ID. Then it will
3:27
be name. then it will be
3:32
um username and then this will be email.
3:39
So inside app.component.ts
3:42
file guys we will declare a user list
3:46
array. So basically this will hold uh a
3:49
array of objects.
3:52
So inside the first object we will have
3:56
four properties. ID field will be one.
3:59
The name field will be you can just put
4:02
any name of your choice
4:07
and uh then username
4:15
and then email address. So,
4:24
so like this guys you can see that
4:27
uh so basically you can put a comma
4:34
and you can just
4:37
write three more times change these
4:39
values accordingly.
4:41
Uh Stewart.
5:03
So just change the values here.
5:15
And here we can see.
5:30
So the there are four
5:33
uh list of data out there guys. You can
5:35
see that we have this. So now we can
5:38
simply loop through inside this table.
5:43
So now to loop through it is very easy.
5:45
Inside this table rotac we can use
5:49
something called as ng4 which is a
5:51
directive inside angular. So basically
5:54
it's a for loop type. So we will say
5:58
user list. You can see that inside app
6:01
component.ts we have this user list
6:04
array. So basically we are just using
6:06
this user list array. For this we will
6:10
first of all print the ID here like this
6:14
inside double curly brackets
6:16
and then we will print out uh
6:20
uh name
6:23
uh then we will print out uh username
6:29
and then we will print out email.
6:33
So in this fashion guys you can print
6:34
out all this information here inside
6:37
this table. So if I now execute this you
6:40
will see that uh export excel is not
6:42
defined. So just define this method guys
6:45
you have uh here let me just delete this
6:48
for now
6:50
and run this. So it is compiled
6:52
successfully. So if I open here
6:55
localhost 4200.
7:01
So now guys you can see that this data
7:03
is successfully displayed inside the
7:06
table. Uh let me just change the ID here
7:12
3 4.
7:15
So now you can see 1 2 3 4. So this is
7:18
name username email. So once I hit this
7:21
button I need to export this to Excel
7:23
file. So for that we need to write some
7:26
code here inside app.component.ts
7:29
file. So here we can define this method
7:32
which is export excel. So just bind this
7:35
here now
7:42
export excel. So here
7:49
inside this method guys what we need to
7:51
do is that.
7:55
So basically this will be a void method
7:59
and inside this we need to first of all
8:03
get the element to which we need to
8:05
convert. So for this we will use
8:07
document.getelement by id. So just give
8:11
it a id to the table to which you need
8:14
to convert. So Excel table. So just give
8:17
it a ID so that we can target. So Excel
8:21
table.
8:23
So after doing this, after getting this
8:25
guys, we can simply declare WS. This
8:30
stands for XLS.
8:32
And you can see we are importing this
8:35
library. Import star as XLS.
8:40
from XLS. So you need to write this line
8:43
at the very top.
8:46
So right here we will use the worksheet
8:50
method here of this.
8:54
So this will be equal to Excels [snorts]
8:57
dot utils dot
9:01
table to sheet.
9:05
This is a method. Basically it converts
9:07
a table element to a worksheet by the
9:11
name itself. So we need to pass the
9:12
element. So we will simply pass the HTML
9:16
table.
9:18
So after this guys we need to generate a
9:21
workbook. For generating a workbook this
9:25
is
9:27
WB. So this will be xls dot workbook
9:32
and this is xls dotutils dot we need to
9:38
initialize a new book like this
9:42
and then we need to say xls dotutils dot
9:45
we need to append so we will say book
9:48
append sheet we will pass the workbook
9:52
worksheet comma so here you need to
9:55
initialize your sheet name so I will put
9:57
sheet
9:58
And then we need to simply write this
10:00
file. So we will simply use write file
10:04
and workbook we need to pass as first
10:06
argument and then the file name. So file
10:09
name guys we need to initialize it. So
10:12
whatever file name that you need to give
10:13
it you can initialize it right here at
10:15
the very top. File name. So this can be
10:20
anything.
10:21
Let me say sample sheet dot xls. That's
10:26
it. So this is your application guys. It
10:29
is complete. Let me test it now and
10:32
refresh it. If I click export, you will
10:35
see examples sheet.xls is downloaded.
10:38
You can see all these values are being
10:40
converted to uh Excel file. So it has
10:43
four columns, four rows. You can see
10:46
that. So in this way guys, you can
10:48
convert any sort of HTML table to Excel
10:52
file.
10:55
Is it it is very easy. So inside Angular
10:57
13. So I have shown you the complete
11:00
example. If you want the full source
11:02
code, you can go to the description of
11:03
this video to download all the source
11:05
code. Please hit the like button,
11:07
subscribe the channel and I will be
11:09
seeing you in the next tutorial. Until
11:10
then, thank you very much.