Up next in 10
jsPDF-Autotable Tutorial to Add Dynamic Tables in PDF Document With Invoice Data in Browser Using JS
Jan 9, 2025
Get the full source code of application here: https://gist.github.com/gauti123456/34dab32151b5179a5b9350d8322a5772
View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video we will look at how to
0:05
generate tables inside PDF document
0:08
using jspdf library and we'll be using a
0:11
plugin called as jspdf Auto table which
0:14
is actually a part of the base jspdf
0:16
library and this is a really simple
0:19
example if you can see on your screen we
0:21
have a simple table out there which
0:22
contains these columns item quantity
0:25
price and total and we have two rows by
0:28
default if we load the application and
0:30
then we have two buttons out there which
0:32
either if you click this add row button
0:35
it will dynamically add a new uh row
0:38
here you can actually add your own own
0:40
item item three then you can provide
0:43
similarly the quantity here and then the
0:46
price of this and automatically as you
0:48
adjust the price the total will adjust
0:51
properly so 25 multiplied by two comes
0:55
out to be 50 this is a total so you can
0:57
add your own item for like
1:04
this this is actually a invoice data
1:07
that we are generating on the Fly and
1:11
after we are done we can click this
1:13
export to PDF button so once we click
1:16
this button all these fields will be
1:19
exported to a nice little table that you
1:21
can see in the PDF document and all
1:23
these data that you can see it has been
1:26
exported has been added right here if
1:28
you see so so we will be looking to
1:31
build this application from scratch I
1:33
will explain you each line of code so
1:35
for this we are actually using the jspdf
1:38
library if you don't know about HT uh JS
1:42
PDF it's a client side PDF generation
1:44
library for uh JavaScript developers it
1:47
also available for node as well but
1:49
we'll be looking at how to use it in the
1:51
browser using the CDN content delivery
1:53
Network so let's start it and if you
1:56
need the full source code the link is
1:58
given in the description you can get the
2:01
full source code so now to get
2:04
started just make index.html file and
2:08
right here we will simply give it a
2:10
title uh jspdf Auto
2:16
table
2:18
example so right here uh we need to sub
2:22
first of all include the
2:25
CDM of both JS PDF and auto Js PDF Auto
2:30
table plugin just after the title you
2:33
need to paste the CDN so that we can use
2:35
it inside this application so we have
2:37
simply pasted the CDM which we are
2:40
fetching it from cloud fair you can
2:43
simply search the CDM if you want to get
2:45
it simply search jspdf CDN and you can
2:49
get them easily using Cloud fa so we
2:51
simply pasted the links so after you do
2:54
this we just need
2:56
to make the application so in the HTM ml
3:01
we will give it a simple heading and
3:03
this will be
3:04
simply jspdf table invoice data
3:11
generator after this we will have a
3:14
table Tab and we will be giving an ID to
3:16
it of uh so that we can Target it in the
3:19
JavaScript so invoice table inside this
3:23
table we will have the table head tag
3:26
inside this we will have a table row tag
3:28
and we have we will have these four
3:31
columns first will be for the
3:34
item then we will have the quantity how
3:37
much quantity you want to P purchase of
3:39
the item then the price and then the
3:42
last column will be for total price
3:45
these will be the four columns which
3:47
will be there if you now refresh your
3:51
application you will see we will have
3:54
these four columns we can simply style
3:56
this using some custom CSS or you can
3:59
use boot strap as well accordingly this
4:01
is your own custom choice but for the
4:03
specific tutorial we are simply using
4:05
some custom CSS so we will Target the
4:07
table Tab and we will give it a fixed
4:10
width of let's suppose
4:13
100% And we will be giving a border R
4:16
border
4:20
collapse of uh let's suppose collapse
4:23
and then we will simply Target the table
4:26
heading and the table data
4:31
so we'll Target both these elements
4:33
together by putting a comma right here
4:35
and then we'll be giving a border to it
4:37
of one pixel solid
4:39
black and then we'll also be giving some
4:42
padding which will be around 8
4:45
pixel some spacing from the inside and
4:48
text align will align all the elements
4:52
from the left position so this will be
4:55
left so if you just see your table now
4:59
it will looks something like
5:02
this and also we also need to Target the
5:06
table heading you only need to change
5:09
the background color this time so we
5:12
giving some grayish color F2 F2 F2 this
5:15
is a b 64
5:16
code so it will look something grayish
5:20
you can see the background color so this
5:22
is not necessary for the application but
5:24
we just styling it so that it looks good
5:27
so after you do this after this table
5:30
head tag we have the table body where we
5:33
describe the data for now when we load
5:36
the application we'll have two
5:39
rows so you'll simply be giving content
5:42
editable makes it editable you can edit
5:45
the
5:46
rows on the fly so it will be item
5:51
one so you will put copy this four more
5:57
times so here we can actually
6:00
uh changes to one this is the actually
6:05
the quantity how much quantity you want
6:07
to purchase then it is basically the
6:09
price so let me put here
6:13
five and then we come the total so 5
6:17
multiplied by 1 comes out to be five so
6:20
like this so in this way you can
6:23
actually give one more row table row you
6:26
can copy this and I can just make it
6:29
item two this time we need to purchase
6:32
two quantities the price will be 10 and
6:35
this comes out to be 20 10 MTI by two so
6:39
you will have these two rows of data
6:41
right here when we load the application
6:43
and we need to have two buttons right
6:46
here just after this table we will have
6:49
two
6:51
buttons so first button will be
6:53
responsible for adding a new row of data
6:56
on the
6:58
Fly and the second button will be
7:00
responsible for exporting this table to
7:04
PDF so we'll be giving a on click
7:07
listener to both these buttons so when
7:09
we click these buttons what should
7:10
happen so we'll be giving a onclick
7:12
listener so we'll Simply Be executing a
7:14
function which is insert row and when we
7:17
click this second button we will execute
7:19
a different function which will be
7:21
generate
7:23
PDF so now we have these two buttons out
7:28
there so so now we need to define the
7:30
JavaScript code for this application so
7:33
just we'll be defining it in a different
7:36
file
7:38
script.js so right in the root directory
7:41
we'll be creating a new file for the
7:43
JavaScript
7:45
code so right here guys we will Define
7:48
our function which will be first
7:51
function will be for inserting a new
7:54
row and the second function will be for
7:57
generating the PDF file
8:00
so these two functions that we defined
8:02
in the HTML file when we click these two
8:03
buttons insert row and generate
8:06
PDF so now for inserting a new row in
8:10
the JavaScript right here when we click
8:12
that insert row button we first of all
8:15
need to Target the
8:17
table by the ID that we have given to it
8:20
so document get element by ID
8:23
table so if you see we have given in the
8:26
HTML the table tag an ID
8:30
this ID is invoice table so let me
8:32
change it this ID to be
8:35
invoice
8:38
table so after getting reference to it
8:41
we need to get all the elements which is
8:43
present inside this table by get
8:46
Elements by tag
8:49
name so we need to get all the elements
8:52
inside table body this is the actual tab
8:55
that we are targeting
9:02
so this will actually get all the
9:04
elements which are present in the table
9:06
body tag and then we need to instantiate
9:09
a new variable new row and right here
9:13
you will be using table dot insert row
9:16
function which is actually a Dom
9:19
function so we are using the vanilla
9:22
JavaScript right here we are not using
9:24
any third party Library we use simply
9:26
using the Dom function insert row so to
9:28
create a new
9:31
row
9:34
and after
9:37
this need to create the cells here cell
9:41
value cell one this will be new row dot
9:45
insert
9:47
cell because it's a table element so we
9:49
need to actually create the cell value
9:52
right
9:53
here this is actually the table data
9:55
that we are creating dynamically so it
9:58
has four
9:59
columns so we are basically giving
10:02
values for all these four
10:06
columns cell three will be for the price
10:10
of
10:11
it so insert cell and this the price
10:15
will be
10:16
two cell
10:18
for new row this will be for the total
10:23
insert cell again we'll be using the
10:25
same function three so as you know that
10:29
indexing start from zero in programming
10:31
so zero represents the first First
10:35
Column the second column represents by 1
10:38
2 3 now we actually get to assign the
10:42
values so now for assigning the values
10:44
we simply need to say cell one. content
10:50
editable because these fields will be
10:53
the user can change the values of it so
10:56
we'll say set it to true and then we set
11:00
the inner inner text of this the label
11:03
of these fields this will be new
11:07
item so similarly we'll be uh repeating
11:10
this for all the four
11:17
cells so I will make it the value here
11:20
cell to
11:34
so if you
11:40
now refresh here if I click this
11:43
button if you now see I do need to I
11:46
think table do insert row is not a
11:49
function I think there is some kind of
11:51
error which is happening let me see
11:54
table do insert row
12:03
sorry sorry here we are targeting the
12:05
table body and we do need to give the
12:08
actual element so we need to Target the
12:11
first element right here so here we do
12:13
need to provide in square brackets zero
12:15
so we are actually targeting the table
12:17
body first
12:20
element right
12:23
here so if you now refresh so it will
12:27
actually if you refresh here click this
12:29
button it will add a new row and here
12:31
you can change the value from item
12:34
three then here you can change the value
12:37
to quantity one like this so here you
12:40
can add as many rows dynamically with
12:42
the Press of a button so this is working
12:46
and we do need to change the labels of
12:49
this to be this inner text will be for
12:54
the quantity so quantity default value
12:57
will be one and the price value will be
13:02
Zero by
13:03
default and
13:06
the then the total value will also be
13:11
zero so if you now refresh it will come
13:14
because it's a numic value quantity
13:16
price and total that's why so after you
13:20
do this uh we also need to attach in the
13:23
index. HTML to both these table data
13:26
these table data fields we need to
13:28
attach attach some input here event so
13:33
when we basically provide the quantity
13:36
and the price we need to adjust the
13:38
total property total value automatically
13:41
let's suppose if I provide quantity one
13:43
and the price to be five so 5 multiplied
13:46
1 is equal to 5 it should reflect in the
13:49
total field automatically for doing that
13:52
we do need to attach event handlers to
13:55
this uh uh this quantity and the price
13:59
so for attaching these we can simply say
14:02
on
14:05
input we need to define a function which
14:08
is update
14:12
total we can simply pass the reference
14:16
this similarly we need to attach it to
14:20
this input as well which is for the
14:23
price on input so when we basically
14:26
press a keyboard key to this input key
14:29
field this function will automatically
14:31
call itself update total again we'll
14:35
pass in
14:37
this the current value it will be passed
14:40
automatically to this function when we
14:42
press any key to this input field this
14:45
function will get execute
14:47
automatically so we do need to write
14:50
this
14:51
field here also
15:00
so now uh what you need to do
15:03
guys this total field is not editable so
15:07
just remove this attribute from
15:11
here this value is calculated so here
15:14
also just remove
15:17
it you can't uh change the total
15:22
value so after you do this we do need to
15:25
Define this uh update total function
15:29
which will get executed to calculate the
15:32
total value so
15:35
update
15:37
total and we will basically get the
15:39
element here passed to it so now we need
15:42
to actually
15:43
fetch the value so element dot parent
15:47
element so we need to get the parent of
15:50
it so we can do it inside Dom right here
15:54
so we need to get the quantity right
15:57
here so we need to get
16:00
the value in floating one so we can use
16:02
Parts float row. cells one do inner text
16:08
and if the value is not defined in that
16:11
case we will give basically take the
16:13
default value which is
16:16
zero so similar thing we'll do it for
16:18
the price as well
16:20
so par float row. cells 2 do inner text
16:27
if the value is not defined then we will
16:29
take the default value which is
16:31
zero so after taking quantity and price
16:34
if you now to calculate the total it's
16:36
really simple we simply multiply the
16:39
quantity by the
16:42
price and then we basically insert this
16:45
value to the third input which is inner
16:48
at text total we will round the value by
16:53
using this function two fixed one by by
16:56
one decimal point so if you now refresh
16:59
your application if you now existing
17:01
change the quantity right here to
17:03
two you will see automatically the total
17:06
field will get updated as you multiply 5
17:09
by two it comes out to be 10 if I change
17:11
the quantity to 10 the value will change
17:14
to 20 so in this way you can do this so
17:18
now we do need to do the same
17:21
thing dynamically as well so right
17:26
here we need to set the attribute for
17:29
the second field similarly so we simply
17:32
need to say cell to do set attribute and
17:36
this will be for on
17:38
input we need to call the same function
17:40
right here which is update
17:44
total
17:45
this and same thing we need to do this
17:48
for this cell three as well for the
17:50
price
17:58
update total this so we are simply
18:01
calling this
18:03
function and passing the element as an
18:06
argument so this function will get
18:08
called and then automatically
18:11
the so if you refresh now click the add
18:14
row button and if you change the
18:18
quantity here to two because change the
18:20
price to two two multiplied by two comes
18:23
out to be four if I change the price to
18:26
be 50 so it comes out to be 100 so now
18:31
this uh invoice data table is complete
18:34
now we just need to export this data to
18:37
a PDF document for doing this we need to
18:40
Define this generate PDF function so for
18:43
this we will be using the jspdf
18:48
library so here you simply initialize a
18:51
new document object new Js
18:54
PDF and then we'll Define actually get
18:58
access to the
18:59
table
19:01
document. get element by ID so we have
19:04
given this ID to the table invoice table
19:08
then we need to get the headers of the
19:10
table you can use this function which is
19:13
built in array
19:15
from you can create an array here from
19:18
this value table dot query selector all
19:22
so it will select all these elements
19:25
from the table row
19:29
and here we just need
19:32
to map it we'll use the map function to
19:37
the table
19:41
row so you'll be using
19:44
array you need to return here return an
19:47
array so you'll simply again use this
19:49
function array
19:51
from TR do query selector TD whatever is
19:56
present in the table data again M
20:02
it what is present in the inner text so
20:05
TD do inner
20:08
text so it will actually return these
20:11
headers all these values that you got
20:14
now we only need to get the headers so
20:16
we first of all remove the
20:19
first element so for removing this we
20:22
can simply say data.
20:25
shift so you can simply say we need to
20:30
remove the first element from the data
20:32
because it's the header
20:34
row yes
20:38
basically this this is actually the data
20:41
and for a for the headers we Define
20:45
another function headers and again we
20:47
use the same con concept array
20:51
from table do query selector this time
20:54
we will be selecting the table heading
20:56
tag and here we'll be mapping
21:00
everything and we only need the
21:03
table
21:05
heading in a text so this will give us
21:08
all the headers this will give us all
21:10
the data of the table now we need to
21:13
remove the first draw from it so data.
21:16
shift we'll use the shift function to
21:18
remove the headers from the table and
21:21
then we actually add the table in the
21:23
PDF document by using doc dot this is
21:26
the function Auto table
21:29
this is the plugin that uh jspdf uses T
21:34
is capital right here so T Capital Auto
21:38
table this takes a object right here
21:41
head represents the headers of the table
21:44
so we have this we are passing it the
21:46
second function the second data is the
21:49
actual body which is the actual data of
21:51
the
21:52
table so lastly we just need to save
21:55
this uh file so you can Simply Save it
21:58
as table. PDF that's
22:02
all so you can just see guys let me
22:04
summarize you we actually got the
22:06
headers of the table by array from we
22:08
are query selecting the table headings
22:11
then we table rows actually map all the
22:14
table data in a text we store it in the
22:17
data and we remove the first element
22:20
because it's the headers from the data
22:22
then we add this using autotable plug-in
22:25
head body and then we save it so if I
22:28
now test this
22:29
application if I click in export to PDF
22:33
let me see what error has taken object
22:36
null is not
22:38
trable on line number 47 there is some
22:42
kind of
22:44
error uh let me
22:48
check uh sorry this needs to be table
22:52
sorry table. quy selector
22:59
sorry this needs to be TR TR cury
23:02
selector
23:05
Rd and this needs let me just all the
23:10
source code will be present guys in the
23:11
description don't need to worry about it
23:14
I think it's a typo mistake let me again
23:16
paste
23:19
it if I click it now you will see the
23:21
table will get exported
23:29
uh let me paste the full source code
23:31
right here I think there is some kind of
23:33
typo
23:53
mistake so if you
23:57
now click click this button you will see
23:59
the data will get exported you will see
24:01
that and uh if you add a new row you can
24:05
actually add your own
24:07
item put a quantity and a
24:12
price export to PDF and now you will see
24:15
the third row will get exported as well
24:18
so I have explained you guys step by
24:20
step and how to actually make this
24:22
application it's a invoice table data
24:24
generator in PDF uh using jspdf Auto
24:27
table plug-in and we built it from
24:29
scratch if you like this video then
24:32
please hit that like button subscribe
24:33
the channel for more videos like this
24:35
all the source code is present in the
24:36
description of this video and I will be
24:39
seeing you in the next one
#Other
#Programming