Up next in 10
Build a Angular Project to Export Multiple Images to PDF Document Using jsPDF & Html2Canvas in TS
452 views
Jun 7, 2025
Get the full source code of the application here: https://codingshiksha.com/angular/build-a-angular-project-to-export-multiple-images-to-pdf-document-using-jspdf-html2canvas-in-ts/ Official Website: https://freemediatools.com
View Video Transcript
0:02
uh hello guys uh welcome to this video
0:04
so in this video I will show you a
0:06
angular project in which you can export
0:08
multiple images into PDF document so
0:11
it's a web application as you can see we
0:13
have a HTML form where you need to
0:16
select multiple images with choose file
0:19
button is there and also we have export
0:21
to
0:22
PDF and for this we are using two
0:24
open-source packages which is JSPDF and
0:27
HTML to canvas so here if I select
0:30
multiple
0:32
images I selected these two images and
0:35
if I click export to PDF you will see
0:37
all these images will be converted to
0:39
PDF and the PDF file will be downloaded
0:41
as an attachment you try to open this
0:44
you will see this is the first image
0:46
this is the second image so both the
0:48
images have been exported to
0:50
PDF so similarly you can select any
0:54
image it can be PNG it can be any image
0:58
so let's suppose I select seven images
1:01
again you will see all these images will
1:03
be converted into each page will contain
1:06
a single image so this is the web
1:09
application and for this we are using
1:10
two packages first of all we using this
1:13
library which is JSPDF the command is
1:16
simple you simply install this npm JSPDF
1:20
the second package is HTML 2 canvas
1:23
which is a actually a screenshot library
1:27
it is used to take screenshot inside the
1:30
browser so the command is simple npm
1:32
HTML to canvas so just install both
1:35
these packages and after that all the
1:38
source code I've given in the
1:39
description of the video so I will start
1:42
it from scratch so let me just delete
1:44
everything
1:51
so this is a
1:55
basic angular project here so we are
1:58
using the latest version of
2:00
angular so at the time of recording this
2:03
it is uh I think 19 or 20 so very first
2:07
thing you need to do you need to go to
2:10
app.component.ts
2:12
TS file and just inside this you need to
2:16
declare or import the package here first
2:19
of all so we need to import this package
2:20
which is
2:26
JSPDF so you import this after that you
2:29
need to simply declare a variable here
2:32
which will be image previews and this
2:34
will be of string array and it will be
2:37
an empty array by
2:39
default and now we need to go to this
2:43
app.component.html file your template
2:44
file and inside this we will have
2:47
actually a form where we will be
2:50
accepting the user to upload
2:52
multiple images so they will select
2:56
multiple images for this we'll be having
2:58
this input tag input type is equal to
3:01
file and we'll be binding this onchange
3:04
event handler so whenever user selects
3:08
some files this function will execute
3:10
which is on file change and event will
3:13
be passed automatically and here we'll
3:15
be attaching multiple so we will allow
3:18
the user to select multiple images and
3:21
the user will only select only images so
3:24
we are binding this accept parameter and
3:27
after that we will have a div tag
3:32
so we will just attach this class here
3:34
which is image
3:39
preview and then we'll attach
3:42
this attribute which is ng4
3:46
so we will loop through each image so
3:49
let image
3:50
of image previews so we declared this
3:54
variable which we are referencing here
3:56
in the template image previews if you
3:58
see in the typescript we declared this
4:03
variable and right here we
4:05
will simply embedding this each
4:12
image so like this then after that we
4:15
will simply have a button so as soon as
4:17
you click this button all these images
4:19
will be exported to PDF so you will have
4:22
this button export to PDF and here we'll
4:25
be having this on click event handler so
4:27
whenever you click this button you will
4:29
execute a function which is export to
4:33
PDF so I need to define this function in
4:36
the TypeScript here so go to the
4:38
TypeScript file and right here you
4:41
define both these functions first of all
4:44
on file
4:47
change and the second function is your
4:50
export
5:00
PDF so if you refresh your application
5:03
nothing will happen we now need to
5:05
define both these functions right here
5:07
so the very first function is on file
5:10
change so whenever you select some files
5:13
we will make
5:16
this again empty array and then we will
5:20
get the total number of images which are
5:23
selected so event.target dot files so
5:26
this will get the total number of files
5:27
which are selected and here we will
5:29
simply have this if condition that if
5:32
the files are selected and then we will
5:36
also calculate the length here
5:39
so so this means that if the images are
5:42
selected only then only process it and
5:45
for this you will loop through each
5:47
image so you simply have a for loop here
5:49
let file of
5:52
files and inside this we will read each
5:55
image by using the file reader
5:59
class this is a very basic way by which
6:01
you can read the images in the browser
6:05
and we have this onload
6:10
function and then we simply say this dot
6:13
image previews dot push and push each
6:17
image e.target dot result
6:22
and just outside
6:26
this we also will
6:29
be saying reader dot read as data url
6:34
which is a base 64
6:36
code so this function will be
6:39
responsible for reading all the images
6:41
that are selected and then inside this
6:45
export to PDF function we will
6:46
instantiate a new instance of this JSPDF
6:51
package and then we'll calculate the
6:54
width of the page by calling
6:56
this JSPDF function PDF dot internal dot
7:02
page size dot get
7:06
width and Then we will embed each image
7:10
so we will make use of a variable count
7:13
so this dot image previews dot for each
7:17
we'll use the for each loop for each
7:21
image you will get the properties of
7:24
each image right here which using this
7:27
PDF dot get image properties
7:32
dot and then we will calculate the PDF
7:36
width and the height so this is simply
7:40
the page width and for the PDF
7:43
height there will be this simple formula
7:46
that is the image props dot
7:49
height and you need to multiply this by
7:52
PDF width and then divide this whole
7:56
thing by image props dot
8:00
width so after getting both these things
8:03
PDF width PDF height we can
8:05
[Music]
8:07
simply do
8:10
this so this we are doing it for each
8:13
image this logic that we are doing right
8:15
here so this will embed each image in
8:17
the PDF document so then we are calling
8:19
this function PDF dot add image this is
8:22
the function inside JSPDF so we are
8:25
adding this image which is a PNG image
8:28
with PDF width PDF
8:30
height and lastly in order to save the
8:33
PDF file we call the save function and
8:36
then give it a file
8:41
name and then inside your
8:44
app.component.css file you do need to
8:46
add some stylesheet so just for styling
8:49
the images so we can give it a margin a
8:53
max width height and the border so
8:55
simply paste this CSS styles right here
8:58
in this file so this completes this
9:00
application and if I try to refresh it
9:04
and choose some
9:05
files and click export to PDF you'll see
9:08
your file will get downloaded
9:11
automatically uh I think it is empty
9:18
all the source code guys is given in the
9:20
description of the video i think I made
9:23
some kind
9:24
of typo mistake so let me just fix it
9:28
again
9:37
refresh i think here in this
9:53
HTML so now you can see all the images
9:56
are showing in the PDF so there was just
9:58
a typo mistake in the code so all the
10:00
source code is given in the description
10:02
of this video so in this easy way you
10:05
can build out this angular project which
10:07
export multiple images into PDF it's a
10:10
web application we have used these two
10:13
packages and also check out my website
10:16
freemediatools.com
10:18
uh which contains unlimited number of
10:20
tools regarding audio video and
10:23
image and I will be seeing you in the
10:26
next live stream