Angular PDF-LIB Example to Export Text & Images to PDF Document in Browser Using TypeScript
Feb 5, 2025
Get the full source code of application here: https://codingshiksha.com/angular/angular-pdf-lib-example-to-export-text-images-to-pdf-document-in-browser-using-typescript/ Hi Join the official discord server to resolve doubts here: https://discord.gg/cRnjhk6nzW Visit my Online Free Media Tool Website https://freemediatools.com/ Buy Premium Scripts and Apps Here: https://procodestore.com/
View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you how to
0:04
make a web application inside angular uh
0:08
which actually allows you to enter text
0:12
or convert images to PDF documents so
0:14
you can see the demo on your screen so
0:16
we have a simple text area where we
0:19
allow the user to Simply paste any bunch
0:22
of text and also we have input field
0:25
where we allow the user to select
0:27
multiple
0:28
images and we have a generate PDF button
0:31
so as I paste some sample text here in
0:35
the text
0:37
area and also if I choose some image
0:40
files it can be any PNG or jpg so let me
0:44
select these three
0:46
images so we pasted some text and also
0:49
selected these three images so as soon
0:51
as I click the button here generate PDF
0:53
you will see the PDF file will get
0:55
downloaded as an attachment and if I
0:58
open the PDF document you will see see
1:00
it will format this text and it has
1:03
automatically detected depending upon
1:06
the length of the text it has calculated
1:08
that seven pages are required and it has
1:11
splitted across multiple Pages this is
1:13
the first page this is the second page
1:16
and you can see that depending upon the
1:19
length of the text it has calculated
1:21
this
1:22
automatically and images you can even
1:24
see the images are also appearing
1:27
perfectly the full width and the size so
1:31
these three images so in this way you
1:33
can create a dynamic PDF document inside
1:36
angular and we are using a package which
1:40
is an open-source
1:43
Library JavaScript library the name of
1:46
the library is PDF lip if you just type
1:49
on Google the very first uh Library
1:52
which comes the website
1:56
pdf.js this is the actual
2:01
the website
2:03
here so there is a package you can
2:06
directly use if you go to npmjs.com uh
2:09
just search for this package PDF lip so
2:13
we are directly using this package
2:15
inside this angular application so the
2:18
command is simple you install this
2:20
package uh it's almost got
2:23
641000 weekly downloads it's a pretty
2:26
popular package and I've given all the
2:28
source code of this examp example in the
2:31
description I have written a stepbystep
2:33
blog post so you can check out the blog
2:35
post where I've written the complete
2:38
source code so if you need the source
2:40
code you can go to the description link
2:42
so now let's get
2:43
started by building this application so
2:47
the very first thing we need to do we
2:48
need to go to this file here app.
2:50
module. typescript file and here you
2:53
just need to import the buil-in forms
2:56
module of angular because we will be
2:58
working with forms we just need to add
3:01
this import statement right here and
3:04
then you need to go to the Imports array
3:06
and then just add this forms module so
3:09
that's all that we need to do inside
3:11
this file so you can close this and then
3:14
let me delete everything and start from
3:16
scratch so this is your typescript file
3:20
and the template file so I will delete
3:22
everything so the very first thing we
3:25
will do we will declare some variables
3:27
in the app. component or typescript file
3:29
so right here we will declare two
3:32
variables the user text which will be a
3:35
string variable initial value will be
3:38
empty and second variable will be the
3:41
selected images which will be a file
3:43
array and by default it will be an empty
3:46
array so we have declared two two
3:48
variables first variable will hold the
3:50
text that the user will submit secondly
3:53
we have declared empty array which will
3:56
contain whatever image files the user
3:58
will select so we have have declared
4:00
these two variables now we go to the
4:02
template file here app. component. HTML
4:05
file and right here we will write the
4:09
actual HTML code for this user form so
4:13
you will have a heading here which will
4:14
say PDF
4:19
generator and on the right hand side you
4:21
will see the live preview also as I'm
4:23
writing the code here you will see the
4:24
live preview so we will have a simple
4:27
form where we will allow the user to
4:33
so you will have a simple label you will
4:36
say the user enter your
4:40
text and here you'll be having the text
4:44
area where we allow the user to submit
4:47
the text we'll give it an ID here ID
4:49
text and we'll be attaching this uh NG
4:54
model directive so we have declared this
4:57
variable user text so we directly
5:00
attaching it to this by using this
5:02
angular
5:03
directive and then we need to give some
5:07
rows to it so four and the columns will
5:11
be 50
5:13
so so now it has some space here where
5:16
the user can submit the text after this
5:18
we will have a input field where we
5:21
allow the user to select image files so
5:25
that they can embed image files in the
5:28
PDF document so again will be having a
5:30
label where we will say that select
5:34
images so this will be a simple input
5:38
type will be file and giving an ID to it
5:43
images so we'll only be accepting image
5:46
files so we'll simply say image/ star so
5:50
we also say multiples so you you can
5:53
select multiple files and just I will
5:55
bind an onchange event handler so as
5:58
soon as you select any file we will bind
6:01
this custom function on five selected
6:05
and here inside this function we will
6:06
part this event object so now we just
6:10
need to Define this function in the
6:11
typescript code so on file selected and
6:15
just after this we will have a simple
6:17
button to submit the form so we'll be
6:19
having this button which will generate
6:21
PDF so as soon as the user clicks this
6:26
button the user the form will be
6:28
submitted so so you can see this is
6:31
actual interface of the application very
6:33
simple we have the text area then we
6:35
have the choose file button then we have
6:38
the button right here so now we need to
6:41
Define this function on file selected in
6:43
the typescript code so right
6:46
here so we Define this function here on
6:49
file
6:56
selected so event vot order
6:59
automatically we passed right here so
7:01
what we do inside this function we
7:04
directly Target the form here as soon as
7:08
the you select the input element to
7:13
select images we will keep track of this
7:16
and
7:17
then we will get the images that the
7:19
user has selected and store it inside
7:22
the selected images
7:24
array and we simply use array from
7:27
input. files
7:31
input files nothing it's array of files
7:35
the user will select in this case image
7:37
files so now what happens if you write
7:40
something here choose the files
7:42
here if I select three files and enter
7:46
it you will see in the console you will
7:49
see this file list being returned to you
7:52
because we selected three files so that
7:55
now in the console you will see all
7:58
these three files are been done so
8:00
that's all that we need to do inside
8:01
this function now we need to bind an
8:04
onsubmit event handler to the form right
8:07
here so as soon as the form is submitted
8:10
we need to bind a function right here
8:12
which is which will execute
8:14
automatically as soon as the form is
8:16
submitted so we'll bind this attribute
8:19
submit attribute so we'll be binding a
8:21
custom function which will create
8:23
PDF and we will be passing this event so
8:27
now we need to Define this function
8:29
which is create PDF so now we go to the
8:32
typescript code once again and right
8:34
here we Define this
8:35
function which is equal to it will be a
8:38
async function so create
8:40
PDF and the event will be passed right
8:43
here because this is typ script that's
8:46
why we need to explicitly mention
8:48
this like this so first of all we need
8:52
to prevent the auto submission of the
8:54
form so we simply say event. prevent
8:56
default then we create a new PDF
9:00
document you can use a wait here so we
9:03
simply first for this we use PDF
9:06
document this will be imported from this
9:08
based package which is PDF lip a PDF
9:12
document we are importing
9:14
this and this contains a create function
9:18
so it creates a new PDF document and
9:20
after that here we need to mention which
9:23
font you will be using so you can even
9:26
customize this as well so for this we
9:29
use this PDF doc object and it contains
9:32
this function embed font and here you
9:34
can select from a series of fonts which
9:36
are there in PDF lib Library so we'll be
9:39
using this this times Roman
9:42
font and then you can even set the phone
9:45
font size as well so I will set the
9:47
phone size to be 12 you can set all
9:50
these global
9:51
settings and then I can select a page
9:54
margin how much spacing I need to give
9:56
while 50 here then you can even set the
9:59
line height of the text so this I will
10:02
set it to phont size multiplied by 1.5
10:06
this a simple mathematical formula after
10:09
setting all these variables now we will
10:11
add a new page in the PDF document for
10:14
this we need
10:15
to calculate the current page we will be
10:18
using this function which is ADD page so
10:22
it will add a new page in the PDF
10:24
document using this
10:25
function and then we will automatically
10:28
detect the the width and the height
10:31
using this function which is current
10:33
page do get size so it will return the
10:36
width and the height and using this we
10:39
will calculate the X and the Y position
10:42
of the text so for the Y position this
10:45
will be height minus page
10:50
margin and here we need to calculate the
10:54
position of the text depending upon that
10:56
how much text that you submit we will
10:58
automatically detect the positioning for
11:01
this we need to declare a custom
11:04
function here we'll make it this will
11:07
split the text into multiple lines so we
11:10
need to declare this custom function so
11:12
here we are providing these uh these
11:14
things as argument right
11:17
here the font the phone size the width
11:21
the actual
11:23
text and for this we need to declare
11:26
this function which is
11:30
this split text into multiple lines
11:34
here so all the source code I I have
11:37
given so what I will do I will simply
11:40
paste this
11:45
function so this function is essentially
11:48
doing whatever text that you submit it
11:51
automatically detect the formatting and
11:53
it splits the text into multiple lines
11:56
so that's all that this function is
11:57
doing after we add the text we need to
12:01
save this PDF
12:02
document and also we need to after
12:07
this after we do this we need to Loop
12:11
through the lines adding them
12:13
to the page for doing
12:18
this so after we do this we we'll simply
12:22
run a simple for
12:24
Loop so we will simply run a simple for
12:28
Loop for each line we will calculate
12:33
this and add this so you will have this
12:36
if condition you will
12:39
simply have this if condition add a new
12:42
page if the text has lar if the text is
12:48
there then we will add it to a new
12:51
page so after this we will draw the text
12:55
and for drawing the text we have a
12:58
function which is draw text available so
13:01
we use this function to draw the text on
13:03
the PDF document and it actually takes
13:05
this object as a second argu which is
13:07
the font size the Y position the X
13:10
position the font size the color of the
13:12
text all these things you can customize
13:14
it so in this way RGB value and then we
13:19
need to give the Y
13:22
position y position we will decrement
13:25
the line height like
13:27
this so this is done for the text size
13:30
so all this now we will detect that if
13:33
the user also has selected some images
13:36
for this we will add the images using
13:39
the function which is there in the PDF
13:42
lib Library which is this function which
13:46
is embed
13:51
image so we do need to declare this
13:54
function which is embed image
14:01
so this is will be a simple async
14:03
function which will be responsible
14:06
for so let me just declare
14:14
it so all this source code that I'm
14:17
writing here you will find this source
14:21
code in the
14:25
description I have written a step
14:27
by-step block post so you
14:35
can so let me guide through the code
14:38
here
14:40
so this draw image is a function which
14:43
is there in the PDF lib Library it
14:46
actually takes the actual image that
14:48
needs to be added then it in the second
14:50
object it takes the X position y
14:52
position the width and the height of the
14:55
image so then we lastly we save this p
14:59
PDF document by using the save
15:01
function and then we give it a file name
15:04
and the actual
15:06
bytes so for this we come to this
15:09
function which is save bite array we
15:12
give the name of the file and the bite
15:15
then it actually saves it firstly to a
15:18
blob object and then from that blob
15:20
object we create an anchor element and
15:22
then we download the PDF document as an
15:25
attachment so this is actually all the
15:27
source code and if I
15:31
now go to the application right here and
15:35
paste a bunch of
15:37
text in the text
15:41
area so let me copy this Wikipedia
15:45
paragraph and paste this
15:56
text and also select a series of images
16:00
so I've selected these three images cck
16:03
click on the button you will see the PDF
16:04
file will get
16:14
downloaded so you can check out the full
16:17
blog post that I have
16:18
written so I have basically given all
16:23
this you just need to copy this copy to
16:27
clipboard if you still face any sort of
16:30
problem just paste this
16:36
code and also I have given this app.
16:40
component. HTML code you need to copy to
16:44
clipboard and then go to this file paste
16:49
it and then you can test it out by
16:53
pasting some of the paragraph
17:13
so in this way uh you will see that the
17:15
PDF file will get downloaded and all the
17:18
text has been added alongside with the
17:20
images as well so in this way you can
17:23
create Dynamic PDF document inside
17:25
angular using this Library PDF lip we
17:28
have at the full example if you need the
17:31
full example code I have written a
17:33
complete blog post so the link is given
17:36
in the description so thank you very
17:37
much for watching this video also check
17:40
out my website as well free mediat
17:42
tools.com which contains thousands of
17:45
tools regarding audio video and image
17:48
and I will be seeing you guys in the
17:50
next video