0:00
Uh hello guys in this video I'll show
0:02
you a complete PDF invoice generator
0:06
with live preview application that I
0:09
developed directly in browser using HTML
0:11
CSS. So I've also deployed this. I've
0:14
given the demo link you can check the
0:15
full video description.
0:18
So once you land on this web application
0:20
you fill out the dummy data such as your
0:23
company name, email address, phone
0:24
number, address and then you fill out
0:27
invoice number. So as you basically make
0:30
the changes on the right hand side all
0:32
the changes will be reflected back and
0:35
uh it's a single page application
0:37
without any back end. So it entirely
0:39
works in the browser. So once you fill
0:41
out all the necessary information you
0:43
will see the invoice created and then
0:45
you also see this download PDF button.
0:48
So once you click the download button
0:50
all the PDF will be generated
0:52
automatically. You will see that this
0:54
will be the end result. You will be
0:55
getting a nice little professional
0:58
looking invoice document. So I have
1:01
given the full source code of this
1:03
application. You can directly purchase
1:05
it. After purchasing it, you will get
1:07
this HTML file here which will contain
1:10
all this source code for you. So about
1:13
800 lines of code is there. So it's very
1:16
easy to uh run this application and
1:18
deploy this. So we have used these two
1:21
libraries for this JSPDF and HTML to
1:24
canvas. We have included the CDN links
1:26
here of both the libraries. And now to
1:28
run this, it's very simple. You open VS
1:31
code and simply open it with live
1:33
server. So now we are running it on
1:35
local host as you can see. So again you
1:37
repeat the process. You fill out the
1:39
necessary details. Instantly as you can
1:41
see on the right hand side as you're
1:44
filling out the necessary information,
1:46
everything is created on the fly. You
1:50
can see the live preview as well. So
1:52
this will save you a lot of time because
1:54
many of times you do need to create
1:56
invoice documents for billing purposes
1:58
for your company. So in that scenario
2:00
this application will be very helpful.
2:04
So instantly the invoice document will
2:07
be created for you. So you will see
2:10
that. So both the links are given. Check
2:13
the full description for the demo link
2:15
and also the purchase link.
2:18
So if you are interested you can
2:21
actually purchase the this web
2:25
It's developed entirely in HTML, CSS and
2:27
JavaScript. So if you have knowledge
2:30
after that you can even modify and
2:33
change any of the features of this
2:39
So you can just see here. So
2:43
inside the tabular structure your
2:46
invoice will be created as soon as you
2:50
uh write the relevant information. So
2:53
definitely check out this