videocam_off
This livestream is currently offline
Check back later when the stream goes live
Up next in 10
How to Create Dynamic Form Filled Student Marksheet PDFs in the Browser Using JavaScript & PDF-LIB
Jan 9, 2025
Get the full source code of application here:
https://gist.github.com/gauti123456/1a80a5eb5b5e5bcd7bb4840e9edf8a26
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video we will look at how to
0:04
generate a PDF document dynamically uh
0:08
with the form Fields you'll be using uh
0:11
basically PDF lib Library which is an
0:13
open source Java JavaScript PDF
0:16
generation
0:17
library and uh this is actually the
0:19
application so we have this HTML form
0:22
which is built using bootstrap and we
0:25
will be
0:26
using making a student marksheet
0:29
dynamically we will take the user input
0:31
such as the student name uh their marks
0:34
in different subjects and also their
0:36
student image as well so then we'll
0:38
generate this marksheet so here you need
0:40
to fill out all these details related to
0:42
the student which is student name role
0:43
number class math so if I just put the
0:47
name role number and class and then you
0:49
need to put marks in different subjects
0:52
you can customize this form accordingly
0:55
then we need to actually select their
0:57
image you can just select the jpg image
0:59
of the s
1:00
student and then click this button
1:02
generate PDF so as you click the
1:04
generate PDF you'll see the student
1:06
marksheet will be generated and you will
1:08
see this result we will have this logo
1:11
of the student image then we have this
1:14
different information
1:16
regarding showing it inside form fields
1:19
we have different marks in different
1:21
subjects we have class we have role
1:22
number we have student name so I will
1:25
show you how to do this dynamically so
1:27
you can see we are taking user input in
1:29
the HTML form and then we dynamically
1:32
inserting these details inside the form
1:34
in PDF document so for using for making
1:38
this application we are using this
1:40
Library which is PDF lip it's a very
1:43
famous library of JavaScript to actually
1:45
create uh PDF documents it can even be
1:48
used to modify PDF documents as well
1:50
insert watermarks modify PDF merge it as
1:54
well so let's get started all the source
1:57
code which I used in this video is given
2:00
in the description so what I will do I
2:02
will simply delete everything and start
2:04
from scratch so first of all what I will
2:07
give it a
2:11
title and you need to include the
2:14
CDN we will be using the CDN so simply
2:17
you can just type PDF lib CDN and you
2:21
can go to this website CDN js. comom and
2:23
you can include the CDN right here copy
2:25
this URL and you need to paste it just
2:29
after the body paste
2:31
it inside the script tag just source is
2:35
equal to this so after you do this we
2:37
need to include the custom Javascript
2:39
file so I will simply make a new file in
2:42
the root directory script.js so here we
2:46
will write JavaScript code so now for
2:49
the user interface as I already told you
2:51
we will be using bootstrap so what you
2:54
need to do you need to include the CDN
2:56
for bootstrap so just after the title
2:58
paste the CDN for bootstrap
3:00
and after this we will be constructing
3:02
the user interface for that we'll be
3:04
using the container class of bootstrap
3:07
margin top five and here you'll be
3:09
having a simple heading student
3:12
marksheet
3:15
generator after this you'll be having a
3:17
simple form and this form will get have
3:20
an ID which is
3:23
marksheet
3:26
form and then we'll be having the form
3:28
group class of boot
3:30
and inside this form first of all you'll
3:33
be allowing the user to Simply write the
3:35
name of the student so you simply say
3:38
student
3:43
name
3:46
input type text and we'll be giving a
3:50
bootstrap class of form
3:53
control having an ID to it or student
3:57
name and a placeholder that enter
4:00
student name and it should be required
4:04
so if you just open this in the browser
4:06
it will look something like this we will
4:08
have a simple input field where we allow
4:10
the user to write the student name then
4:13
similarly we will be changing it for
4:16
allowing the user to write role number
4:20
then we have class so here you just need
4:23
to change it role
4:28
number so what I will do I will simply
4:31
copy this I don't want to waste time in
4:33
writing this so I will simply copy
4:36
this so this is for role number and
4:38
you'll see role number class after this
4:42
we will have more Fields where the user
4:44
can write uh marks in different subject
4:48
so you can basically customize this if
4:50
you want to collect more information you
4:51
can have more input Fields so here the
4:54
user will write marks in Math Science
4:56
and History so I've just taken three
4:58
subjects and after this we allow the
5:01
user to actually embed the image of the
5:04
student so for that we will be simply be
5:09
saying we need to say student
5:12
[Music]
5:16
image simply say
5:19
here upload student
5:27
image and this time input type file we
5:30
be having a class here form
5:32
control giving an ID
5:37
here student
5:41
image this will be sorry
5:46
ID and we only be accepting JPG files
5:50
and it should be
5:56
required so you will see basically a
5:59
input field has been added of required
6:02
so here the user will actually upload
6:05
image file so lastly we will have a
6:07
simple button to submit the form and
6:10
this will simply say generate
6:15
PDF so the type of the button will be
6:23
button a bootstrap class of BTN BTN
6:27
primary
6:29
so now we need to Simply bind an onclick
6:32
event handler to this button so when we
6:34
click this button we binding an onclick
6:37
event handler so we will execute this
6:39
function which is generate PDF so now we
6:42
need to Define this function in the
6:44
script.js
6:46
file so this function will be
6:52
async generate PDF so inside this
6:55
function we need to first of all extract
6:59
or Define the library that we using so
7:01
for from this Library we have to have
7:04
three methods PDF document RGB and
7:07
standard fonts so this is all available
7:10
inside this PDF lib library after this
7:14
we need to get all the values which we
7:16
defined in the
7:17
HTML so I will simp to copy this and we
7:20
will get all
7:21
this which is the student name role
7:24
number student class math Mark science
7:27
Mark history marks we just we targeting
7:30
it by this ID that we have given in the
7:32
HTML and then we will be getting the
7:35
value by dot value you'll see that so
7:37
all the input fields we are getting the
7:39
value
7:40
dynamically so after you do this you now
7:44
need
7:45
to also get the student
7:49
image so this also we need to read it so
7:52
for that we'll be saying document get
7:54
element by ID School image we Sorry
7:57
student image we have given the ID to it
8:00
and now to get the actual file which is
8:02
selected by the user you'll be using
8:04
file Z so this will select it and then
8:08
we need to say student we need to read
8:10
that file student image bytes you again
8:14
use a weight keyword so you will say
8:16
school student
8:19
image do array buffer we'll use array
8:22
buffer here to read the input file which
8:25
is selected by the user so now to
8:27
convert that input image into bytes so
8:30
that we can insert it in the PDF
8:32
document so after you do this we know
8:35
now need to create a brand new PDF
8:39
document for doing this in PDF lip we
8:42
need to Simply use a wait PDF document
8:45
and it contains a function called as
8:47
create this will create a new PDF
8:50
document now we need to add a new page
8:53
for adding a new page there is a method
8:55
available in this object which is ADD
8:57
page this will add a new page in the PDF
9:00
document so here you need to provide the
9:02
width of the F document which is 595 and
9:05
height 842 which is a A4 size of the PDF
9:10
document now we need to load the font
9:13
for this we will be
9:16
loading
9:17
altica so we can simply say embed font
9:21
and for this we will be using the
9:23
buil-in fonts in PDF lip one such font
9:26
is helvetica
9:31
so after this we need to set the font
9:33
size as well so we need to set it to
9:36
12 and then we need to basically load
9:40
this image student
9:42
image
9:44
logo at the very top for doing this we
9:47
will simply say PDF Doc and it contains
9:49
a function which is embed jpg so now to
9:52
embed a file image file we have this
9:55
method inside PDF lip so in the inside
9:58
this method we need to pass the bytes
10:01
that we read student image bytes we
10:04
already created this variable right here
10:07
so you're directly passing it to this
10:08
function to actually embed the image at
10:10
the very top so now we have to draw this
10:14
image so now to draw this image we
10:17
actually need to set the size of this we
10:19
need to set the logo size to be 80 and
10:22
then we need to draw this on the PDF
10:24
document so we will use this draw
10:26
function which is available inside PDF
10:28
lip to
10:31
actually insert this image at the very
10:34
top we'll basically pass the variable
10:37
student image logo and we need to set
10:40
this the x coordinate of this image to
10:42
be 595 minus the logo size divided by
10:47
two simple mathematical formula the y
10:50
coordinate will be
10:52
750 and the width will be the logo size
10:56
and the height will also be logo size so
10:59
we have set all these four options to
11:02
actually insert this image on the PDF
11:04
document so if you want to see this you
11:06
can simply download
11:09
This by first of
11:12
all converting it to using this function
11:16
which is PDF doc save so this function
11:18
will actually create this PDF document
11:20
and save it in the memory now we need to
11:23
download this automatically so we'll
11:25
convert this into blob using the blob
11:27
Constructor and we will pass this PDF
11:30
bytes and the second argument will be
11:31
the MIM type for this we will say
11:34
application / PDF and now we need to
11:37
Simply download this so for that we will
11:39
be creating an anchor element so for
11:42
creating Dynamic anchor element we'll
11:44
use create
11:45
element and a and link.
11:49
HF use url. create object URL which is a
11:54
built-in method inside JavaScript create
11:57
object URL and he pass it blob and then
12:01
link. download it's a very basic Way by
12:03
which you can download a file in the
12:06
browser link. click so now if you see if
12:11
I try to fill out all these details and
12:15
uh you will only see the image for now
12:19
because we haven't written the code for
12:21
the rest of the functionality so if I
12:23
just pick my image student image click
12:26
on
12:27
this nothing happens let me see what is
12:29
the error font must be of type string
12:34
or on line
12:38
number script
12:40
23 okay I think we made a mistake typo
12:43
mistake
12:45
somewhere let's
12:50
see let me write this once again I think
12:53
this line okay I just misspelled it Hela
12:57
spelling misspelled it just that
12:59
spelling all the source code will be
13:01
given in the description so if I refresh
13:04
it and try this once
13:18
again so it is saying that page do draw
13:21
is not a function uh let me see page dot
13:25
oh sorry this is draw image because we
13:28
are drawing image in the PDF document so
13:30
this is actually not draw not draw image
13:33
this is a
13:36
function so once again try
13:49
this so you can see the file is
13:52
downloaded and you actually see this
13:54
image appearing at the center position
13:56
so so you can adjust this position
13:59
accordingly if you like and after doing
14:01
this after inserting this image now we
14:03
need to insert the form
14:06
Fields the data that we
14:08
collect so for doing this first of all
14:11
we do need to add a title so for doing
14:14
this we will use page dot draw text
14:17
because we are drawing text so you'll
14:20
simply say student
14:22
marksheet and the x coordinate will be
14:25
200 the y coordinate will be
14:27
720 and the size of the text will be 20
14:31
and the actual font and the color of the
14:34
text RGB 0 0 zero which is black color
14:39
you can see it is highlighted and
14:42
then after we add this now we will
14:44
create a function which will actually
14:46
draw a form
14:48
field in the PDF document draw Field Box
14:52
it will take the actual page number x
14:54
coordinate y coordinate and the width
14:56
and the height of the page and the text
14:59
text the actual text that needs to be
15:01
filled in the form field this is a
15:03
custom function that we defined which
15:05
takes these five arguments so
15:08
now one by one we will call this
15:10
function
15:13
so we call this function you will see we
15:16
pass the current page then we pass the x
15:18
coordinate the y coordinate I already
15:21
calculated these positions sky so you
15:23
can safely copy this and then we need to
15:26
change it for the student name and
15:29
similarly we will be passing
15:32
uh five more
15:35
times you can see that so we are doing
15:38
this for role number student class math
15:41
marks science marks history marks math
15:43
marks
15:45
science so you can see
15:51
that so now inside this draw Field Box
15:55
function
15:59
we now need to create a form
16:04
field in PDF for that we will be using
16:07
uh drawing a shape so this actually
16:11
contains a function draw rectangle and
16:14
inside this we can actually draw a
16:16
rectangle using these coordinates which
16:18
is passed x coordinate y
16:22
coordinate and the actual width and
16:24
height which is passed
16:29
and then we have the Border
16:31
color RGB 0000 which is black color and
16:36
then the Border
16:40
width the color of the text which will
16:43
be
16:44
111 which is
16:46
again black color which is white
16:49
background for
16:52
fill and then after we draw this if you
16:56
just refresh it you will actually see
16:58
the form Fields if
17:11
I so you will actually see these form
17:14
Fields will be added which is 1 2 3 4 5
17:18
6 7 so this is a rectangle if you see we
17:21
have drawn just as this rectangle which
17:23
is giving you the illusion of this is
17:25
actually a form field so in this way you
17:27
can create an rectangle in PDF document
17:30
to create a form field so now inside
17:32
this we will be filling the data
17:34
programmatically whenever the user
17:36
submits it so now to actually insert the
17:40
information in these uh form fields we
17:44
will actually create use the function
17:47
draw text once again so now inside these
17:51
locations we will pass the text and here
17:53
you need to pass the x coordinate which
17:55
is x + 5 y coordinate will be y I + 3 so
18:01
the size of the text will be again font
18:03
size and the actual font and the color
18:06
of the text will be again
18:08
black 0 0
18:12
0 that's all so if you now
18:18
see if you fill out this information now
18:29
so you can see all this information has
18:31
been inserted X successfully now we need
18:34
to show the labels on the left hand side
18:36
so now for showing these labels we will
18:41
simply after we do this you can simply
18:45
show the
18:48
labels using again draw text so for
18:52
showing these labels you'll use the draw
18:54
text function and we already calculated
18:56
the position so I will simply paste it
18:59
so again you can see we have defined a
19:01
variable label offset which is set to 10
19:04
so just to this is used to just the
19:06
position the labels on the left hand
19:08
side and again we are using this
19:10
function which is draw text to actually
19:12
draw the text on the PDF document one by
19:15
one the student name role number class
19:17
math marks so here it takes the x
19:20
coordinate y
19:22
coordinate so the font size everything
19:25
and the color of the text so if you just
19:28
now refresh
19:30
just put the
19:41
information so in this way guys you can
19:43
generate a mini student marksheet with
19:46
images and the actual data that the user
19:49
will submit in browser using PDF lip so
19:53
it's a great application where you can
19:54
dynamically fill out the form and then
19:56
generate the PDF document so thank you
19:59
very much for watching this video and do
20:01
check out my website freem mediat
20:02
tools.com which contains free tools
20:04
related to audio video and image and I
20:07
will be seeing you guys in the next
20:09
video
#Programming
#Education