Up next in 10
Angular 15 PDFMake.js Project to Build Dynamic PDF Invoice Generator in Table From HTML5 Form Data
Dec 22, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/angular-15-pdfmake-js-project-to-build-dynamic-pdf-invoice-generator-in-table-from-html5-form-data/
Show More Show Less View Video Transcript
0:03
Uh hello friends today in this tutorial
0:04
I'll be showing you a new application
0:06
which I developed which is PDF invoice
0:08
generator inside table. So basically we
0:11
will be giving a dynamic data using HTML
0:14
form right here and there are three
0:17
buttons you can download your invoice
0:18
for your company. So if you're in a
0:20
company here you will be able to
0:22
generate uh invoicing application inside
0:25
PDF documents. So we are using uh
0:28
angular latest version which is angular
0:30
15 and we are using PDF make library. So
0:33
here you need to provide the name of the
0:35
person for which you need to generate
0:37
the invoice and then we provide
0:39
basically the email address and then the
0:42
contact number. So all these details are
0:44
there. You can even provide the address
0:47
and then you can provide the products
0:49
here. Provide the quantity here. The
0:53
amount will be calculated automatically
0:55
and then you can click this plus icon to
0:57
add some more products here.
1:00
You can put the price here. It will
1:03
automatically multiply 6 into 424
1:08
5 into 315 and additional details you
1:11
can do like this. And now the there are
1:14
three options out there. Basically here
1:18
we can uh
1:21
click download invoice
1:24
and as I click this button guys invoice
1:27
will be downloaded and basically the
1:30
details that we submitted right here you
1:32
will see dynamically invoice PDF
1:34
document will be there. This is email
1:37
address, phone number and uh the name
1:39
that we provided. The current date and
1:42
time will be automatically embedded.
1:44
Right here you will see 27th PI 202356
1:48
bill number will also be generated. So
1:50
here you can basically replace your own
1:52
company name or shop for your invoice
1:55
generator. This is a QR code which is
1:58
automatically generated and inside this
2:00
table structure we have different
2:02
products which are listed here. So here
2:04
you can replace your own products and
2:06
you also you can print this invoice and
2:09
put your signature here and these this
2:12
is a single page. You can see that very
2:15
simple. The second button which print
2:17
invoice which allows you to print this
2:19
invoice automatically as a black and
2:22
white or color. You can select this
2:24
accordingly.
2:27
And the third option is that you can
2:29
open this invoice in a new tab. And if
2:32
you purchase the full source code guys,
2:34
you will get this directory structure.
2:36
Basically here you can uh modify all
2:39
this uh code that is generated right
2:42
here. So the bulk of the code is inside
2:45
this file. I have component.ts.
2:48
So here you can replace your own shop
2:50
name. Let's suppose I change to my own
2:52
channel name coding. So here you can
2:55
even change the color as well. So you
2:57
can provide hexadimal color. You can
3:00
change this color sky blue to let's
3:02
suppose yellow.
3:08
And here we can even change this color.
3:11
Let's suppose I change it.
3:16
So you can modify all the alignments,
3:18
font sizes. You can change it to let's
3:21
suppose 33. So we are changing company
3:24
name, phone size, color, customer
3:26
details as well. So all these are
3:28
customizable. You can get the code and
3:31
basically you can uh max just modify
3:33
this code and now if you refresh this
3:36
application.
3:38
So Angular 15 application will reload
3:41
and basically it will now if you fill
3:43
out the details here.
3:52
So click download invoice. And now you
3:54
will see that guys your company name you
3:57
will see that it will be changed here.
4:03
So this is basically the application
4:05
guys. So you can see that
4:12
here you can see that. So
4:15
this is basically the code guys which
4:17
allows you to do this process. So if I
4:20
show you the dependency, what dependency
4:23
we are using here,
4:29
if I go to package.json file for this
4:32
project, as I already told you, we are
4:35
using PDF make. PDF make is basically
4:38
it's a client side PDF generation
4:42
library in JavaScript. It can even be
4:45
used in server side as well in NodeJS.
4:48
So simple command npm install pdf make.
4:51
So we are using it inside angular 15 to
4:54
make this awesome little invoice
4:57
generator inside table. So this is
5:01
basically the application.
5:03
So you can purchase the full source code
5:05
guys by going to the description link
5:07
and thank you very much for watching
5:09
this live stream.