Up next in 10
Build a Markdown to PDF Converter Using markdown-it Parser & PDFMake in Browser Using JS
Jan 9, 2025
Get the full source code of application here:
https://gist.github.com/gauti123456/646ed324d2c8d0097aa33291d9a12a6e
Show More Show Less View Video Transcript
0:00
uh Hello friends welcome to this video
0:02
so in this video we will look at how to
0:04
actually pass markdown and convert this
0:08
into a PDF document so this is actually
0:11
the application that you can see on your
0:13
screen uh it's a we having a text area
0:16
and we are actually allowing the user to
0:18
copy paste the
0:20
markdown and we have a button out there
0:22
convert to PDF so we have copy pasted
0:26
this markdown here markdown is a special
0:29
file
0:30
you can see it has a extension of MD
0:35
and so we have this button so if I click
0:39
this button you will actually see this
0:40
markdown will be successfully passed
0:43
first of all and it will be converted to
0:46
HTML and then it will be converted to
0:48
PDF using PDF make opensource library
0:53
and for converting this markdown into
0:55
HTML we are using a library a mark mark
1:00
down parser which is markdown-it so let
1:05
me show you the dependencies that we are
1:07
using markdown-it is a markdown parser
1:12
it's open- Source parser which allows
1:14
you to actually pass the markdown and
1:18
convert that markdown into HTML first of
1:20
all and then that HTML is converted to
1:24
PDF using this uh open-source Library
1:28
which is PDF make PDF make is in open
1:32
source PDF client side generation
1:34
JavaScript library we are using this as
1:37
well and also we are using
1:42
HTML in order to pass the HTML we are
1:44
using this Library which is html2 PDF
1:49
make which is
1:52
a library which is used to
1:56
actually insert the HTML that is
1:59
generated it to PDF so we are using this
2:03
Library as well you will see it's a
2:05
nodejs module it has 63,000 weekly
2:08
downloads so now to get
2:13
started uh we will start building this
2:16
application from
2:18
scratch so first of all I have included
2:21
all the CDN so we have included CDN for
2:24
the bootstrap which is used for building
2:26
the user interface we have included the
2:28
CDN for markdown it which is a markdown
2:31
passer PDF make which is a PDF
2:33
generation library and also HTML to PDF
2:36
Library as well so all the source code
2:39
is will be given in the description of
2:41
this video so I've just copy pasted all
2:43
the
2:45
CDN
2:46
so now for building the interface of the
2:49
application we will have the container
2:52
class of bootstrap and inside this we
2:54
will have an heading here which is
2:56
marked down to PDF app
3:00
and inside this we will have the form
3:02
group class and here we will be allowing
3:05
the user
3:07
to enter the
3:10
markdown so here you will be simply be
3:12
saying that enter
3:17
markdown so we will have a text
3:23
area you will basically give an ID here
3:26
to this so that we can Target in
3:28
JavaScript and you will give WR
3:30
bootstrap class of form control and rows
3:33
I will give it as
3:36
10 so if you open this now in the
3:39
browser it will look something like this
3:40
a text area will be there and also we
3:44
need a button to submit the form so it
3:47
will simply say that convert to PDF and
3:51
it will have an class
3:53
here BTN BTN primary and give it an ID
3:57
here button so it will look the
4:01
interface will look something like
4:04
this and after this now we'll be writing
4:07
the custom JavaScript code right here so
4:10
we just make a script Tab and inside
4:16
this I will just make a external file
4:19
here so
4:20
script.js so right here just make a
4:23
script.js file so here we'll be writing
4:26
the JavaScript code so first of all you
4:28
need to get the reference of the element
4:31
button we have given an ID to the
4:36
button so when we click the button we'll
4:39
bind this event handler so when we click
4:41
the button this call back function will
4:45
execute so first of all we need to get
4:47
the markdown which is entered by the
4:49
user so for for that we will
4:54
be getting the reference of the element
4:57
so document do get element by ID so we
5:00
have given the input the text area and
5:04
the ID here markdown input so we can
5:07
directly get the value by dot value so
5:10
whatever the value the user enter inside
5:13
the text area which it will be get
5:16
inside this
5:17
variable so now we need to pass and
5:21
convert the
5:23
markdown to
5:25
HTML so for that we will be using that
5:28
uh Library
5:30
markdown
5:33
parsel so window dot you can access that
5:36
Library using markdown doit this is the
5:39
name of the parser for Library which
5:42
actually parses the markdown and convert
5:44
that into HTML so this is actually the
5:49
function and now we will actually get
5:53
this you can initialize the markdown
5:55
parcel and it actually contains a
5:57
function which is render which actually
6:00
does the logic here which actually
6:03
converts the markdown into HTML so here
6:06
this render function takes the argument
6:08
markdown input as an argument now it
6:11
will give you the HTML you can console
6:14
log it just to cross
6:17
check so if you open this now and you
6:22
need to paste the markdown so if you
6:25
paste your markdown click on this button
6:29
and check check in the console you will
6:31
actually see it will return you the HTML
6:34
here so it will
6:36
actually pass and convert this markdown
6:39
and you will see this HTML is there so
6:43
now our job is to insert this HTML in
6:46
the PDF document so after we get this
6:51
HTML we will actually use the second
6:54
Library which is uh used which is html2
6:59
PDF make this is actually the library
7:02
which will take the HTML and insert that
7:05
into the PDF
7:08
document so we will have this uh in
7:11
order to download the PDF document we'll
7:14
need to define the
7:16
document and inside the content property
7:19
we need to insert this PDF content that
7:21
we are getting in the previous
7:25
step and now we can essentially download
7:28
the PDF document doent by writing this
7:30
code here which is PDF
7:33
make and it contains a function which is
7:36
create
7:38
PDF and here we will need to pass the
7:41
document definition and we need to open
7:43
it
7:45
automatically so this completes the
7:48
application so if you refresh your
7:50
application and paste the markdown and
7:52
click on this button convert to
7:57
PDF so it is saying that html2 PDF make
8:01
is not a
8:05
function just make sure that
8:10
you okay here T is capital so just make
8:14
sure T is capital right here so T is
8:17
capital P is
8:20
capital so this was just a type of
8:23
mistake so if I again open this and
8:26
paste the markdown
8:34
and click on this button so now you will
8:37
see your markdown will first be
8:39
converted into HTML and then that HTML
8:41
will be converted into the PDF document
8:44
that you guys seen right here so
8:46
everything has been you can see has been
8:48
converted to PDF here so you can paste
8:53
any markdown right
8:55
here in the text area click on the
8:58
button and you will see your or HTML
9:00
will be converted to PDF like this so
9:05
all the source code will be given in the
9:07
description so whatever source code that
9:09
I used in this video so you can go to
9:11
the description and get the full source
9:13
code and apart from that you can go to
9:16
free mediat tools.com and check
9:19
out uh the tools that I deployed here so
9:23
it is related to audio video and video
9:26
so you can check out these tools as well
9:28
and uh please hit that like button
9:30
subscribe to channel and I will be
9:32
seeing you in the next video
#Programming