Up next in 10
Build Angular PDF-LIB Project to Export Multiple Images to PDF Document in Browser Using TypeScript
Jun 7, 2025
Get the full source code of the application here:
https://codingshiksha.com/angular/build-angular-pdf-lib-project-to-export-multiple-images-to-pdf-document-in-browser-using-typescript/
Official Website:
https://freemediatools.com
Show More Show Less View Video Transcript
0:03
uh hello guys welcome to this uh live
0:05
stream so in this tutorial I will show
0:07
you uh a angular application which will
0:11
actually convert multiple images into
0:13
PDF so it's a web application and for
0:16
this we are using another library PDF
0:19
processing library which is PDF lib
0:21
which is an open-source library for
0:24
processing PDF files you can edit PDF
0:27
files directly in the browser so this is
0:30
actually example app here you have this
0:32
HTML form where you can select multiple
0:36
files let me select these files here so
0:39
you will see you have selected two
0:40
images and we have this button export to
0:43
PDF if you click this button you will
0:46
see your images will be get exported it
0:49
will have the full size it will take the
0:51
full size of the page this is the first
0:53
page this is the second page so in this
0:55
easy way you can select as many images
0:58
as you want and then instantly it will
1:00
convert all your images into a PDF
1:03
file so if you select seven images
1:06
you'll see it will create seven pages in
1:09
the PDF file and each page will take the
1:11
entire image so we are using this
1:14
package here if you go to npmjs.com just
1:17
search for this package PDF
1:20
lip and it's a library where you can
1:24
actually create and modify PDF documents
1:26
right in the browser itself so the
1:28
command is simple you simply install
1:30
this by executing this command and I
1:33
have given all the source code in the
1:35
description of this video so now to get
1:38
started I will delete everything and
1:40
start from scratch
1:45
so the first thing you need to do you
1:48
need to go to the app do component.ts
1:50
file and right here you need to import
1:53
this
1:53
package so using the import statement so
1:57
you will simply say
2:00
import PDF
2:03
document RGB and it will be coming from
2:06
this library PDF lip after that you will
2:10
declare two
2:12
variables for storing the images image
2:16
previews string array and initial value
2:20
will be empty array and secondly image
2:30
files and then you need to go to
2:32
app.component html file this is your
2:34
template file so here you will actually
2:37
show a form to the user where they will
2:39
select the
2:40
images so right here we'll be having
2:43
this input type
2:45
file we are binding this onchange event
2:48
handler on file change so this function
2:50
will execute as soon as the user changes
2:53
the images they select images this
2:56
function will execute and we are binding
2:58
multiple to allow multiple file upload
3:01
and only accepting images so now we need
3:04
to define this function all on file
3:06
change in the TypeScript code so right
3:09
here we go to this file and define this
3:12
function which is on
3:14
file change and it will be having this
3:19
event and then we will have a simple div
3:24
tag where we can actually show the
3:27
images which have been selected so we'll
3:30
be having this div tag ng for directive
3:33
let image of image previews and we are
3:36
binding this class image preview and
3:42
just showing these images using the
3:44
image tag so right in the CSS we
3:48
basically added these CSS styles so just
3:50
add these CSS styles so we are targeting
3:52
the all the images that are selected
3:54
giving it a margin a max width of 100%
3:58
height of auto and a border of 1 pixel
4:00
solid gray color so just add these CSS
4:03
styles after that
4:05
uh we will have a simple button as soon
4:10
as you click this button your PDF file
4:12
will be created and downloaded so we
4:14
binded this function export to PDF as
4:17
soon as you click this button so now we
4:20
just need to define this function as
4:21
well which is export to
4:24
PDF so this function will be async we
4:28
will simply say export
4:30
to
4:33
PDF
4:35
so firstly we will write this on file
4:39
change function so this will execute as
4:41
soon as you
4:42
select the files or the images so first
4:47
of all we'll make use set image previews
4:51
to empty array and also this dot image
4:55
files to also empty
4:57
array then we will read all the images
5:00
which are selected you will get this by
5:03
event.target files and this is a very
5:06
standard way by which you can read all
5:08
the files which are
5:10
selected by using the file reader API
5:13
this is available in every browser so
5:16
again we are using this in the if
5:18
condition we are checking if the files
5:19
are selected then we are running a for
5:22
loop for each file we are pushing it in
5:25
this array image files after that we are
5:29
reading it using file reader API
5:31
creating an object of and then it
5:34
contain this onload function so when
5:36
your images are loaded then we are
5:38
pushing it inside this array image
5:40
previews whatever is the target result
5:44
which comes when you call this function
5:46
read as data URL which is reading the
5:49
base 64 code of the file so after you
5:52
read all these images and store it
5:54
inside the variable now we write this
5:57
function which is export to PDF so here
6:00
you first of all create a new PDF
6:02
document by using this PDF document dot
6:05
create function this will create a new
6:07
PDF file and after that you need to loop
6:10
through all the images that it's present
6:13
inside this variable which is this dot
6:16
image
6:17
files so first of all we calculate the
6:20
bytes here calculating the bytes we
6:23
convert this into array
6:25
buffer then we declared these two
6:29
variables image variable and the
6:32
dimensions of each image so we need to
6:34
make sure that each image takes the
6:36
entire page width and
6:38
height
6:40
and here we simply detect that if the
6:44
image is PNG or JPG so here we simply
6:47
have a if condition for this so here we
6:50
are saying that if the image is PNG then
6:53
we are using this function which is
6:55
embed PNG so you can see it has a series
6:58
of
6:59
functions so one such function is embed
7:01
PNG so here
7:03
you embed this PNG image or else if the
7:07
image is JPG in that case we simply use
7:10
this function which is embed JPG and
7:14
here you pass your image bytes so after
7:17
embedding this image now we just need to
7:20
calculate the dimensions so you just
7:22
need to make sure that each image takes
7:24
the entire space in the page so for this
7:27
we call this function which is image
7:29
dotscale and here you pass one as an
7:34
argument and lastly you need to add this
7:37
image to the PDF document for adding
7:39
this image we call this function which
7:41
is add
7:43
page which is available so here you pass
7:46
the dimensions the width and the
7:51
height and then we simply draw this
7:54
image so we also need to draw this so we
7:57
have this function here of draw image so
8:00
here you pass this image and then the
8:03
argument here you need to specify the x
8:05
coordinate and the ycoordinate so I will
8:07
say 0 0 and in order to make sure that
8:12
it takes the entire space so we need to
8:14
calculate the width so dimensions width
8:17
and height is dimensions
8:20
height so this will make sure that each
8:23
image will cover the entire page and
8:27
after embedding it we just need to save
8:29
this PDF file so for saving it we have a
8:32
function here which is PDF
8:35
doc.save so this will save the PDF file
8:38
and then we can simply download this so
8:41
this is a very simple technique by which
8:43
we convert this into a blob and then
8:45
download this as an attachment so right
8:48
here I pasted this code here so if we
8:51
constructed this blob here passing this
8:54
PDF file and then we call this function
8:57
URL.reate object URL passing this blob
9:00
and then using this anchor tag we can
9:02
simply download this image as an
9:04
attachment in the browser
9:07
so that's all that we need to do and if
9:09
you refresh your browser and uh select a
9:13
bunch of
9:15
images and then click this button and
9:18
you will see a PDF file will be
9:21
constructed and
9:24
uh all the source code is given in the
9:26
description of this
9:34
video so you can select as many images
9:37
as you want and then instantly it will
9:39
create the PDF file and it will contain
9:42
all the images that you selected so it's
9:44
a very useful app and it is using this
9:47
open-source library PDF
9:50
lip so also check out my website free
9:53
mediatools.com uh which contains
9:56
unlimited number of tools regarding
9:57
audio video and image and I will be
10:01
seeing you in the next one
#Flash-Based Entertainment
#Programming
#Software