Up next in 10
Javascript PDFMake Example to Create PDF From Text & Images in Browser Full Example
Jan 9, 2025
Get the full source code of application here: https://gist.github.com/gauti123456/20fa8cd6232fe4eb1e6f25ec8d6b1e16
View Video Transcript
0:00
uh Hello friends welcome to this video
0:02
so in this video we'll be looking at a
0:03
brand new library of JavaScript which is
0:06
a PDF generation
0:08
library and uh the name of the library
0:11
is PDF make it is similar to jspdf PDF
0:15
lib all such other libraries but uh it
0:19
is slightly different in generating the
0:23
content the name of the library if you
0:25
see PDF make if you just type this on
0:27
Google it will the very first result
0:29
which comes Comes This is their official
0:33
website it can even be used on server
0:36
side as well
0:37
nodejs and it has a nodejs module which
0:41
is PDF make you can install it using npm
0:44
or
0:45
B but in this video we will be looking
0:48
at how to use it directly in the browser
0:50
using a CDN you can just see all these
0:53
features in the
0:55
documentation and they do provide a
0:57
playground as well where you can try out
0:59
all the features as
1:03
well so uh the thing is that we describe
1:06
the content using this construct uh this
1:09
uh
1:13
object and we Define multiple text by in
1:17
this you can see the live preview on the
1:20
right hand side as you make any sort of
1:27
changes so you can just see you can make
1:30
your PDF document right in the browser
1:34
itself it did provide you
1:37
this all sort of complex examples are
1:40
also present if you
1:50
see you can even embed tables as well
1:52
you can see the formatting looks
1:56
good this is a three-page column
2:00
you can even embed tables as well
2:03
complex tables like
2:08
this uh but uh I personally use this
2:11
Library so I just want to tell you it is
2:14
slightly complicated whenever you
2:17
are writing like this you will
2:21
see the syntax of this library is
2:24
slightly complicated as compared to
2:26
other
2:27
ones you can even init images as as
2:31
well using base 64 code or you can
2:35
directly load a local image file from
2:38
your local file system as
2:41
well and you can see we are using base
2:44
64 data for loading this
2:47
image I think you can even embed
2:49
external URLs as well you can control
2:52
the image withth opacity everything so
2:54
let me show you a very basic example how
2:57
we can do this process in the browser
3:01
all the source code that I will use is
3:04
given in the description of this video
3:08
so first of all for using PDF lip for
3:12
PDF make you do need
3:15
to include the CDN for
3:20
that so I've already included the CDN so
3:23
that we can use this library right
3:25
directly in the
3:28
browser and we do using Tailwind CSS for
3:31
just making the UI of the application so
3:33
I just included the
3:36
CDM so I will not write the HTML
3:39
uh this is
3:44
just let me just explain you what this
3:48
uh if I open this uh you will actually
3:52
see there is a simple model which says
3:53
generate PDF and download PDF button so
3:57
that's all and now for for
4:00
actually writing the JavaScript we will
4:04
be referencing a new file script
4:11
JS so now for you can bind on click
4:15
listener to this generate PDF button
4:17
generate
4:19
PDF add event listener so when we click
4:22
this
4:28
button so you'll simply declare a
4:30
variable content for page so whatever
4:33
content that you want to export you
4:35
define this content in a variable in PDF
4:38
make so this will be array so we s just
4:41
write these square brackets of array and
4:44
then here we provide the actual things
4:47
that needs to be exported inside objects
4:50
so set of curly bracket so either it can
4:53
be text element or it can be image
4:56
element so the text element will look
4:58
something like this hello world this is
5:01
some
5:03
text and here you can provide additional
5:06
properties such as the styling
5:08
properties it is at
5:11
header like
5:14
this you can even Define unordered list
5:17
as well after you define the text we
5:20
Define the doc definition
5:31
whatever is the content here you need to
5:34
initialize the content right here dot
5:36
dot dot content from
5:43
page and then after this you can
5:48
Define The Styling
5:51
information using Styles property and
5:55
here you can Define the header
5:57
Styles phone size
6:01
bold to
6:04
true you can Define the margin as well 0
6:07
0
6:11
01 and then after that the most
6:14
important thing to actually download
6:16
this as an attachment so PDF make and it
6:19
contains a method create
6:23
PDF and here you provide the docs
6:25
definition and then it's a download
6:27
method it contains simply give it a file
6:31
name result.
6:32
PDF so if you run this on the
6:40
browser if you click the button I think
6:43
some error has
6:46
taken oh you will get this error if you
6:49
haven't included the ttf the phont
6:53
file which needs to be included while
6:55
you are working with PDF
6:58
make so you can get this using CDM links
7:02
as well
7:04
so just where you include the base PDF
7:07
make Library also include this font
7:09
files as well which is
7:12
vsor fonts. JS so this represents all
7:16
the information about all the phones
7:18
that you will be using
7:20
so after you include this file you will
7:23
not get that error if you click download
7:26
the file will get downloaded and you
7:29
will actually see that heading that you
7:31
defined hello world this is some
7:33
text so in this easy way you can
7:36
generate some PDF document but now if
7:38
you want to embed images you can even
7:42
embed images from local file system as
7:44
well there is a image
7:46
property and my image is present if you
7:49
see image. jpg so I can reference this
7:53
image uh right here
8:08
click on download it is saying that
8:10
image. jpg not found in Virtual file
8:16
system okay you can't directly use uh
8:19
image paths in JavaScript for that you
8:23
do need to use
8:24
nodejs but we can encode this image to
8:27
base 64 code
8:31
if you want to Ed
8:36
images so you can actually use a base 64
8:46
encoder image to base 64
9:01
so you can get this base 64 code and
9:04
here you need to paste the
9:23
code so after you do this now if you
9:26
refresh it
9:32
you will actually see the image will
9:33
also get added to the PDF
9:36
document so you can actually if you're
9:41
just building it directly in the browser
9:43
you need to encode your images to Bas 64
9:45
code but if you are using nodejs server
9:48
s side environment you can directly use
9:50
the local file paths as
9:53
well and then we can
9:58
actually this was all I think a very
10:01
basic example on how
10:03
to then we can even have additional
10:06
elements such as if you want to show
10:08
unordered list you can put a
10:16
comma so for that you can read the
10:19
documentation all these elements are
10:20
supported for the formatting not more
10:23
examples are given so in this video I
10:25
just wanted to show you a very basic
10:27
example in the browser on how to use
10:29
this PDF make Library so thank you very
10:33
much for watching this video and if you
10:35
need the source code the link is given
10:36
in the description and I will be seeing
10:39
you in the next video
#Clip Art & Animated GIFs
#Flash-Based Entertainment
#Fun & Trivia
#Internet Software
#Other