WEBVTT

00:00.000 --> 00:06.000
Hello friends, today in this tutorial I will be showing
you that how to convert your html to pdf file using this

00:06.000 --> 00:15.000
in angular 9 using this module which is ngx export as so
this is a npm module, it has weekly download for 2400

00:15.000 --> 00:20.000
so just go to your angular 9 project
and inside the command prompt

00:20.000 --> 00:31.000
just install this module which is ngx-export-as
just install this module, execute this command here

00:31.000 --> 00:36.000
so you should be having npm installed on your
computer in order to install this module

00:36.000 --> 00:42.000
so this will hardly take 5 to 10 seconds
and reading upon the documentation

00:42.000 --> 00:49.000
now you can see that it has used these libraries to
convert html to canvas, html to pdf all that stuff

00:49.000 --> 00:55.000
so after download you need to include this
inside your app.module.typescript file

00:55.000 --> 01:01.000
so basically this is the documentation which is given
to us this is the module that you need to add here

01:01.000 --> 01:07.000
let me just copy this line here
and move my to app.module.ts file

01:07.000 --> 01:11.000
so this is the file and here you
just need to copy paste this line

01:11.000 --> 01:16.000
and also add this module which is export
as module inside your import array

01:16.000 --> 01:26.000
which is just put a comma and write this statement
export this is the module export as module

01:29.000 --> 01:35.000
so after doing this step here now you can
see that the library is still installing

01:35.000 --> 01:45.000
so I am just doing these steps after this you
need to copy this line inside your component file

01:45.000 --> 01:51.000
so this is my app.component.ts file and here
you also need to copy paste this line here

01:51.000 --> 02:00.000
and after that you will be defining your export
as config so this will take the two parameters

02:00.000 --> 02:05.000
the type and the element id so basically
here you just need to paste this

02:05.000 --> 02:10.000
so basically it is taking two parameters
the type tmg file or jpg file

02:10.000 --> 02:15.000
and the second is the element id so
here you will paste the element id

02:15.000 --> 02:26.000
so let me just give my id to as element so this you
need to define inside your app.component.ts file

02:26.000 --> 02:34.000
so let me just have a simple heading
or let me just have a simple div

02:34.000 --> 02:42.000
sorry you have a div here which we
have to convert it inside pdf document

02:42.000 --> 02:48.000
so inside this div we will be giving
an id to it which we have defined here

02:48.000 --> 02:53.000
the same id which we have defined here
which is app.component.element here

02:53.000 --> 03:00.000
so we will give this id to it of element
and inside this we will define a heading

03:00.000 --> 03:06.000
this is a table and inside this
we will be defining a table stack

03:06.000 --> 03:20.000
inside this we will have the table heading
like this and some table rows john15

03:20.000 --> 03:27.000
and I will just copy paste
one more time here like this

03:27.000 --> 03:33.000
4 rows it will have and basically now
I need to also have a simple button

03:33.000 --> 03:39.000
in order to convert it to a pdf document
so here I will be having button

03:39.000 --> 03:47.000
download pdf so I will attach the onclick attribute to it so
when we click this button we will be executing this function

03:47.000 --> 03:57.000
which will be download so basically move to the app.component.ts
file and here I will be executing my download function

03:57.000 --> 04:04.000
so inside this go to the documentation and also you
need to export this inside your constructor also

04:04.000 --> 04:10.000
so just copy this line and inside your
app.component file just make this constructor of it

04:10.000 --> 04:15.000
constructor and export this service
here so we are using this service

04:15.000 --> 04:21.000
that we have included right here at the top here you
can see that and now we just need to use this service

04:21.000 --> 04:30.000
use the method which is available
to us so the method is very simple

04:30.000 --> 04:36.000
this is the method here you can see
that inside this there is a save method

04:36.000 --> 04:43.000
so I will just copy paste this code here and
inside our download I will paste this code here

04:43.000 --> 04:53.000
so this export service contains this save method
and this config I will just pass this config here

04:53.000 --> 05:05.000
like this this.exportAsConfig I will pass this here
and after that I can just control all the content

05:06.000 --> 05:13.000
so if I just rerun the application
here let me just run the application

05:13.000 --> 05:19.000
it is telling me that export as
module cannot find the module

05:19.000 --> 05:28.000
so let me just rerun now it has successfully installed
it I think that I need to rerun this application

05:28.000 --> 05:36.000
so again I need to execute this ng serve command so
basically it will compile the application for us

05:36.000 --> 05:43.000
so just wait so it is very important
that you add this inside your

05:43.000 --> 05:48.000
app.module file because with the help
of this file it finds the dependency

05:48.000 --> 05:57.000
so just add this inside your app. now
it is just compiling it so just wait

05:57.000 --> 06:02.000
so for the very first time it
takes the time it takes some time

06:02.000 --> 06:08.000
but after that it will not take some
more time so just wait it is just

06:08.000 --> 06:19.000
compiling the application and see that it is building it
so now you can see that it has compiled it successfully

06:19.000 --> 06:26.000
if I open this localhost 4200 and now
you can see that this is our table

06:26.000 --> 06:30.000
and these are the 4 table
tags if I click download pdf

06:30.000 --> 06:34.000
it will download this as
a png image if I open this

06:34.000 --> 06:39.000
you will see that it has
converted it inside a png file

06:39.000 --> 06:44.000
if I open this file the file is just
opening so now you can see that

06:44.000 --> 06:51.000
a very simple application where we have converted
the html and we have exported it to a png file

06:51.000 --> 06:57.000
using this ng export as library in angular main
application so thanks to you for watching this video

06:57.000 --> 07:03.000
if you like this video then please hit the like
button subscribe the channel and also don't forget to

07:03.000 --> 07:07.000
like the video and I will be
seeing you in the next video