0:00
Uh hello guys, welcome to this uh video.
0:03
So in this video I'll show you a invoice
0:06
PDF invoice generator web application
0:08
that I developed inside the browser. I
0:11
have also deployed this. I've also given
0:13
the demo link in the description of the
0:15
video. You can check out this. So what
0:17
this application does, it actually
0:19
generate a PDF invoice for you instantly
0:23
uh directly in the browser. So this is
0:25
the interface. So here you fill out your
0:27
company name, your email address and
0:30
instantly live preview side by side you
0:33
will see the invoice will be created.
0:35
It's developed entirely inside HTML, CSS
0:38
and JavaScript. As you can see I'm
0:40
writing the information. You basically
0:43
write here the address. Then you
0:45
basically provide your invoice number,
0:47
invoice date, due date. Here you can
0:50
even select the currency. Various
0:52
currencies are supported. Then you
0:54
provide the information about the
0:56
client, email address, phone number. So
0:58
I've given the source code uh link in
1:01
the description. You can p purchase the
1:03
source code. So here you basically
1:05
provide the items. You can provide the
1:08
rate and based upon that
1:11
the items will be also be added. You
1:14
click the add item button to add
1:15
multiple items. And here you can also
1:17
adjust the quantity as well.
1:21
So as you can see in the right hand side
1:23
automatically as you are providing the
1:26
data everything invoice is creating
1:29
automatically. Lastly we can even put a
1:31
discount and a text as well.
1:35
So then you have this button of download
1:38
PDF and instantly as you click the
1:40
download PDF button your PDF will be
1:43
created invoice and this is the end
1:46
result. you will get nice invoice
1:49
document for your company. So everything
1:52
has been captured. So I have given the
1:56
link of that uh source code. You can
1:58
directly purchase it. So once you
2:00
purchase it, you will get this source
2:01
code. It's almost round about 7 800
2:05
lines of code. It's entirely built
2:07
inside HTML, CSS and JavaScript. So it's
2:10
very simple to deploy and run. You can
2:13
basically open it in VS code simply run
2:17
it with a simple local server. So we are
2:19
running it on local host. As you can see
2:24
it's very simple to deploy as well. You
2:26
can purchase a domain name just uh host
2:28
the static tool which directly runs in
2:31
the browser. You fill out the details
2:33
and instantly at the right hand side the
2:36
invoice will be created and uh here you
2:38
fill out the information related to the
2:40
client. So I have used two libraries for
2:43
this HTML to canvas and JSPDF for
2:45
building this invoice generator.
2:50
once you get the source code you will
2:52
able to see how I created and also be
2:54
able to modify the source code. So this
2:56
is HTML to canvas and the second library
2:59
is JSPDF which is a PDF generation
3:02
library. So we have used these two
3:03
libraries for building this PDF invoice
3:06
generator with live preview.
3:09
uh please check the link for the demo
3:12
and also the payment link. So both the
3:15
links are given in the description. So
3:17
this is the actual web application. So
3:19
it's a really nice application which can
3:22
generate your PDF invoice documents
