0:00
this uh live stream I'll show you a
0:02
Canva clone PDF invoice generator web
0:05
application that I developed directly in
0:07
the browser. I've also deployed this.
0:09
You can check out the live demo. I've
0:11
given the link in the description of
0:13
this video at the checkout page. This is
0:15
the demo link which is present. The
0:17
application is really simple. If you
0:19
want to generate uh PDF invoices, it's a
0:22
single page application. You can even
0:24
change the theme as well.
0:27
And here you basically fill out the
0:29
information such as company name, email
0:31
address, phone number, address, client
0:33
information right here.
0:36
Address you basically and these are the
0:40
You fill out the information related to
0:43
your so you can add multiple items as
0:46
well. Fill out the rate here.
0:49
Automatically the rate will be
0:50
calculated according to the rate. This
0:53
is the bill which is created. And then
0:56
we also have the download button. Click
0:59
on generate PDF. As soon as you click
1:02
the generate PDF, your PDF file will get
1:04
downloaded. This is your invoice. This
1:07
is the items that you described. This is
1:09
a total amount payable by the client
1:12
here. And right here you have this
1:15
company name, email address, everything
1:16
that you put right here. So this is a
1:18
really good application for generating
1:20
PDF invoice documents directly in the
1:22
browser. And if you want to purchase the
1:25
full source code, you can purchase it. I
1:27
have given the link in the description
1:29
of the video. So this application uh
1:32
it's entirely coded inside HTML, CSS and
1:35
JavaScript. Almost 1,200 lines of code
1:38
here as you can see. So you can run this
1:41
locally as well. Simply open it with
1:43
live server. So now we are running it at
1:45
live server. It's a single page
1:48
application. You basically fill out the
1:50
information as you change the company
1:52
name automatically it will be reflected.
1:55
So all this information you can change
2:00
as you're writing on the right hand side
2:01
the live preview is changing. So this
2:03
here you've mentioned your address
2:08
everything you can customize it.
2:11
This is the invoice number you can check
2:13
it from the calendar date picker
2:15
currency all these currencies are
2:17
supported. You can even add your own
2:20
currency as well in the HTML.
2:23
Due date here. You can add multiple
2:25
items here by clicking the add item
2:27
button and just mention the rate.
2:36
If you are adjusting quantity, it will
2:38
multiply 5 by 2 by 10. Can also remove
2:42
it by clicking the remove button. And
2:44
lastly, you can even put tax discount.
2:46
If you're giving a discount here, you
2:48
can you can directly print it out as
2:50
well. This will open the print window
2:52
and you can directly print it as well.
2:54
Or if you want to generate a PDF, then
2:57
the invoice will be generated in a PDF
3:01
and automatically get downloaded.
3:07
So definitely check out this application
3:09
guide. It's really awesome application.
3:14
the invoice will be generated for you.
3:18
So before purchasing it, you can try
3:20
this. I've given the demo link
3:23
in the description. When you go to the
3:25
check out page, you will see the demo
3:30
And you can just see here I've used
3:32
couple of third party libraries here.
3:34
HTML to canvas and JSPDF. If you don't
3:37
know, they are very popular libraries.
3:40
So JSPDF is used for generating PDF
3:44
documents from JavaScript and HTML to
3:47
canvas is used for taking screenshots.
3:50
So these are two open-source free
3:52
libraries that I used for building this
3:55
application directly in HTML, CSS and
3:59
So the link is given guys. You can
4:00
directly purchase the full source code.
