WEBVTT

00:00.000 --> 00:04.720
Hello friends, today in this tutorial I will
be showing you that how to make a very simple

00:04.720 --> 00:11.520
application in which you can just convert
your raw HTML template with CSS also

00:11.520 --> 00:19.160
You can use bootstrap also. So simply copy paste your
HTML code here and it will convert it into a PDF document

00:19.160 --> 00:25.160
So we will be converting this using a library
which is a client side library of JavaScript

00:25.160 --> 00:33.960
which is PDFmate.js. So this is their official website here,
this is a client server PDF printing in pure JavaScript

00:33.960 --> 00:42.160
So I have given the link in the video description. So this is a complete
step by step blog post which tells you which is JavaScript, PDFmate

00:42.160 --> 00:48.239
example to convert dynamic raw HTML template
to PDF document in browser using bootstrap 4

00:48.239 --> 00:53.080
So you can just download all the source code. The
link will be there inside the video description

00:53.080 --> 00:57.280
So I will be talking about step by step in
this video in order to build this application

00:57.280 --> 01:07.520
First of all let me just show you a short demo. So this
is, let me have a valid HTML here, a heading h1 tag

01:07.520 --> 01:12.320
So you can just put a label
here, this is a heading

01:12.320 --> 01:20.480
Also you can put a paragraph also, this is a paragraph. So you
can copy paste inside this text area whichever you need to convert

01:20.880 --> 01:27.080
So if I convert to PDF, you will see
it will download it as an attachment

01:27.080 --> 01:33.080
So you will see this is your heading here and this is your
paragraph. So it is successfully converted to a PDF document

01:33.080 --> 01:40.080
So it is that easy. So you need to simply
copy paste it inside this text area

01:40.080 --> 01:47.240
So let me just save this. So now I will show you
a complete template which is a table template

01:47.240 --> 01:51.640
So here we are using also bootstrap. Here
you can see bootstrap pdn we are using

01:51.640 --> 02:01.120
So I have just simply copy pasted the table here. You can see this
is a table tag and it contains table row tag, table body also

02:01.120 --> 02:05.480
So if I convert this to PDF, you will see it
will download it as an attachment and this

02:05.480 --> 02:10.400
is your table here you will see.
So into actual classes you can see

02:10.400 --> 02:15.720
You can also try it with images also. So
there is an image tag also inside HTML

02:15.720 --> 02:25.400
So you can put a source here. So you can put images let's
say let's suppose I put a image here which is from a URL

02:25.400 --> 02:32.920
So I can put this image copy image address.
So let me try it if it is working or not

02:32.920 --> 02:41.960
So this is your image tag if I convert this.
So let me just see here a problem is occurred

02:41.960 --> 02:53.160
It is saying that invalid image file. So you should be
only be getting the images from the local file system

02:53.160 --> 03:00.480
So first of all we need to download this image. So I have this
image here you will see sample.png inside my local directory

03:00.480 --> 03:18.320
So let me just paste this here sample.png. So if I convert
this so let me just once again do this image source sample.png

03:18.320 --> 03:26.959
So file not found in virtual file
system. So you can't write images

03:26.959 --> 03:34.840
So images are not there. But apart from that you
can try out any sort of raw HTML that is valid

03:34.840 --> 03:39.920
You can convert to a PDF document. So
you will start building this application

03:39.920 --> 03:45.520
All the source code will be there inside video description. So
just go to the video description and download all the source code

03:45.520 --> 03:50.920
So first of all guys what you need to do
is that let me delete this file from here

03:50.920 --> 03:56.720
So just make index.html file inside your favorite
text editor I am using Visual Studio Code

03:56.720 --> 04:08.079
So put a simple template here. So simply
change the title to PDFmate.cs example

04:08.079 --> 04:11.960
So here we will use some bootstrap
also for designing the interface

04:11.960 --> 04:20.600
So you can just search bootstrap CDN.
So you can redirect to w3schools.com

04:20.600 --> 04:25.520
Go to get started and you will
see we only need the CSS one

04:25.520 --> 04:32.680
So simply copy the CDN and simply paste
it. You also need some jquery as well

04:32.680 --> 04:42.640
So simply click jquery and go to get started
and you will find this CDN which is this CDN

04:42.640 --> 04:48.840
So simply paste it. You can also go to my blog
post and simply copy paste all the source code

04:48.840 --> 04:56.840
It is not necessary to go through this step. And for the
library which is PDFmate.js so you will need the CDN here

04:56.840 --> 05:03.040
The script app. These three ones you will
need here. So simply paste it as well

05:03.040 --> 05:10.920
So you will see PDFmate library we are
using. Bin.js, fonts as well and browser.js

05:10.920 --> 05:16.200
Specifically for this application we
are using its plugin which is HTML2PDF

05:16.200 --> 05:22.280
If you search on this you will see this
is the library that we are using here

05:23.200 --> 05:28.159
This is a subset of this library
HTML2PDF. This is npm repository of this

05:28.159 --> 05:35.239
12000 weekly downloads is there. So it simply takes
the raw input HTML and converts to a PDF document

05:35.239 --> 05:44.640
So it makes work easier in the PDFmate. So simply now we will have
the container class of bootstrap and we will have a heading in

05:44.640 --> 05:57.360
the center position and we will say HTML2PDF. The
title. And then we will have a simple form element

05:57.360 --> 06:09.000
And we will have a id of the form. And then we will have a form
group class of bootstrap and inside this we will have text area

06:09.000 --> 06:13.800
We will attach a unique
id to it which is of HTML

06:13.800 --> 06:20.400
So that we can target it inside jQuery and
we will attach a bootstrap class which is

06:20.400 --> 06:27.239
form control. And then guys we
will have the simple button here

06:27.239 --> 06:39.960
Sorry this is not needed I think. Button btn btn danger
for the red color and for the full width btn block

06:39.960 --> 06:49.320
So here we will say create PDF. So if I look the
interface you will see create PDF it is ready here

06:49.320 --> 06:56.200
Basically we need to copy paste it. So we can also
put a label as well just telling the user what to do

06:56.200 --> 07:05.520
So we can say enter raw HTML. Like this
that's it. So this is our interface is ready

07:05.520 --> 07:11.360
Now we simply need to put the Javascript
code as well. So simply put script as

07:11.360 --> 07:18.080
And first of all we will get the value that the user has
typed. For that we will have the form submit callback

07:18.080 --> 07:26.919
So whenever the form submits we will have this e parameter. So we
will call e.prevent default or prevent auto submission of the form

07:26.919 --> 07:33.760
Then we will get the HTML which is written inside
textarea. So we will target this through jQuery

07:33.760 --> 07:43.719
So like this $ we will attach
the id here which is html.value

07:43.719 --> 07:48.679
Then we will call the library guys. So
it is simple 3 lines of code is there

07:48.679 --> 07:55.080
So what you need to do is go to my code here.
So let me just guide you what is happening here

07:55.080 --> 08:05.359
So you will declare this
here variable you will pass

08:05.359 --> 08:11.679
Make a new variable val and inside this
you will call the library which is PDFmake

08:11.679 --> 08:22.200
So this is the library sorry html2pdfmake.
And here we will pass the raw html that's it

08:22.200 --> 08:30.280
So inside this val we again need to construct data here. And inside
this there is a content parameter and we need to assign it to val

08:30.280 --> 08:36.680
So this is just 3 steps that we need to make here.
And lastly we need to allow user to download the file

08:36.680 --> 08:51.839
So inside this we will download the PDF file as attachment. So for that what
you need to do is that there is a method out there which is PDFmake createPDF

08:51.839 --> 08:56.319
So create PDF so here you need to pass the
data which we have constructed and .download

08:56.319 --> 09:02.439
So it will download it as attachment.
So now the application is complete

09:02.439 --> 09:11.120
So if I put a heading here this is the heading
and convert create PDF so you will see it

09:11.120 --> 09:17.680
will download it as attachment. So
this is your heading here x1 heading

09:17.680 --> 09:30.280
So in this way you can also
put h2, h2 heading, h3 heading

09:30.500 --> 09:38.560
Any valid html you can put here so h4 tag. You can
try out all the html tags it will work smoothly

09:38.560 --> 09:47.160
You can try out paragraph tag as well. This is paragraph.
So if you create it now you will see it will work

09:47.160 --> 09:57.600
This is h1, h2, h3, h4 and paragraph. So
in this easy way guys you can just do it

09:57.600 --> 10:04.760
So tables are also supported. So this was
a very awesome application that I developed

10:04.760 --> 10:10.920
So all the source code will be there inside video description. So
thanks a lot for watching this video and please like the video