0:00
PDF editor and generator I have built
0:03
inside the browser. It has all the
0:05
options if you want to generate a
0:06
billing invoice in PDF. So this is the
0:09
application I have running it on
0:11
localhost 3000. It's developed entirely
0:14
in ReactJS. We have used quite a number
0:16
of third party libraries such as JSPDF
0:18
HTML to canvas as well react. As you can
0:21
see we are using React and this is
0:23
overall project. Uh the link is given
0:26
you can directly purchase the source
0:28
code. So once you purchase it, you will
0:29
get the source code from Google drive
0:31
automatically. So all the components are
0:34
uh basically coded inside JavaScript as
0:36
you can see. So now to run this project,
0:39
it's very simple. You simply go to
0:40
command line, simply type npm run start.
0:43
This will start the local development
0:45
server. And now in the invoice you can
0:51
the name, email address, everything.
0:56
You can put any address here. Billing
1:03
you can add items here. The description,
1:06
you can add any currency here. All the
1:09
currencies are supported in the
1:10
drop-down. You can select your currency.
1:12
You can also add multiple items. As you
1:15
change the rate, the total will update
1:17
or accordingly you can change the
1:20
pricing as well. So automatically total,
1:23
subtotal, discount, text, everything is
1:25
calculated. You can even put a tax rate
1:27
as well. Let's suppose 2% of tax rate,
1:30
5% of discount. So everything is
1:33
calculated accordingly. Now if you click
1:35
review invoice you do need to provide a
1:42
and now in this model like structure you
1:44
will preview the changes. Now if you're
1:47
happy you can click on download. So now
1:50
it will download the invoice as a PDF
1:52
file. So now if you open the PDF file
1:54
you can see all the changes is reflected
1:56
back. your name, invoice number,
1:59
address, everything, email address, the
2:01
total number of items are calculated and
2:05
shown right here in the output invoice.
2:08
So this is the very simple single page
2:10
application in ReactJS. So it has all
2:13
the features as you can see if you have
2:15
knowledge you can even add multiple
2:18
uh on top of uh you can modify anything
2:21
or add additional features as well. So
2:23
here you can change your currency as
2:25
well to pound, euro. Just select the
2:28
currency or add your own currencies as
2:33
It's a very famous application. You can
2:35
even add multiple items. Just change the
2:37
rate total number of quantity and
2:41
depending upon the rate will change. So
2:44
here you can plug the information just
2:47
generate change the invoice number as
2:51
the due date just provide the
2:53
information whatever is the address
2:57
email address and uh the name of the
3:02
preview the changes again the changes
3:05
will be reflected back so very simple
3:07
kind of a PDF invoice editor and
3:09
generator in ReactJS and for building
3:11
this we are using these libraries such
3:14
as JSPDF as you all know it's a very
3:18
popular PDF generation library for
3:21
And then we are also using HTML to
3:23
canvas which actually allow you to take
3:25
screenshots directly in browser with the
3:28
help of JavaScript. So these are two
3:31
libraries that we are using for this
3:32
project and you can directly purchase
3:35
it. The link is given in the
3:36
description. So easily you can run this.
3:39
You can even deploy this application as
3:41
well. npm run build. So this will build
3:45
out your application.
3:47
So it's a professional looking invoice
3:49
generator and builder. So definitely
