WEBVTT

00:00.000 --> 00:05.300
Hello friends, today in this tutorial I will be
showing you that how basically we can export

00:05.300 --> 00:12.000
a dynamic pdf document using html template
inside your angular 14 application using js

00:12.000 --> 00:17.700
pdf library and the file saver js library to
download the pdf document as an attachment

00:17.700 --> 00:21.799
You can see we have got a button out there,
if I click this button a pdf document would

00:21.799 --> 00:27.000
be downloaded as an attachment. If I open that
document you will have name and the email

00:27.000 --> 00:34.000
address. This basically we have, as we said
the typescript code here. We have set this

00:34.000 --> 00:38.000
template here which is having the name and
the email address and we have the newline

00:38.000 --> 00:44.000
character. You can even embed two newline
characters here. Now if I generate it, you

00:44.000 --> 00:48.000
will now see there will be two line breaks.
You will see that. You can customize this

00:48.000 --> 00:53.000
template, html template guys and basically
you can change the name and the email address

00:53.000 --> 01:03.000
to any name. Thereby you can generate the
dynamic pdf documents with ease using angular

01:03.000 --> 01:11.000
application. If I change the email address
and now if I refresh you will now see the

01:11.000 --> 01:16.000
name and the email address will be changed
here. You will see that. Now I will be showing

01:16.000 --> 01:21.000
you that how to do this process step by step.
For this tutorial I have given all the code

01:21.000 --> 01:26.000
in the description of the google. This is my
blog post. There I have written the complete

01:26.000 --> 01:32.000
blog post. Now let us get started. Let me just
delete all this code and start from scratch

01:32.000 --> 01:36.000
The very first thing you need to do guys,
you need to install two dependencies. First

01:36.000 --> 01:45.000
is jspds and you need to install fileshader
library. So basically if you go to command

01:46.000 --> 01:56.000
dom. Npm i jspds jspds and fileshader. So
install these two dependencies. I have already

01:56.000 --> 02:02.000
installed it and I will start the angular
application. After this guys you need to move

02:02.000 --> 02:10.000
to the app.component.html file here and here
you will have a simple button out there. So

02:11.000 --> 02:17.000
you will simply have a button label that generate
period and you will be binding a onclick for

02:17.000 --> 02:23.000
whenever you click this button. You will generate
a function which is write a function which

02:23.000 --> 02:29.000
generates period. So now we need to write this
function. So we need to move to app.component.txt

02:29.000 --> 02:37.000
file and here we just need to import two dependencies.
First is jspds dependency. So import jspds

02:37.000 --> 02:46.000
from jspds and then we need to import the
fileshader dependency as well. So import as

02:46.000 --> 02:55.000
fileshader and this will be imported from
fileshader. That's all. Now inside this guys

02:55.000 --> 03:00.000
we will be initializing an object here which
will contain two properties here. Data object

03:00.000 --> 03:06.000
and this will be an object and we will have
two properties here name and here you can

03:06.000 --> 03:13.000
give any name of your choice and then you
have the second property which is email. You

03:13.000 --> 03:20.000
can have as many properties as you want. You
can see that we have the data object here

03:20.000 --> 03:26.000
and now we can define the function which will
generate period. So now as you click the button

03:26.000 --> 03:31.000
this function will execute and inside this
function guys you will instantiate a new reference

03:31.000 --> 03:39.000
of jspds. So we will see new jspds. We will
initialize a new reference of jspds and right

03:39.000 --> 03:45.000
here we will define our template guys. So this
will be content. We will use the backtick

03:45.000 --> 03:52.000
symbol and here we will have the basically
the template HTML template. So we can say

03:52.000 --> 04:00.000
the name is. You can use the backtick symbol
and basically we will say this.data.name and

04:00.000 --> 04:06.000
we can close the paragraph tag and then we
can define another paragraph. Here we can

04:06.000 --> 04:13.000
embed the email name and then we can embed
the email this.data.email and then we can

04:13.000 --> 04:19.000
close the paragraph like this. So this is
our HTML template guys. Now we need to expose

04:19.000 --> 04:25.000
this to the pdf document. So we can use jspds
library for this. So we can simply say doc.text

04:26.000 --> 04:31.000
and we can pass the content and we can save
time comma 10. That's in the Y coordinate

04:31.000 --> 04:37.000
and here we can convert this to a DOE 64 URL
using the method called as output and here

04:37.000 --> 04:44.000
we can provide blob. So we need to convert
this to a blob object so that we can download

04:44.000 --> 04:49.000
this as an attachment. So here we can use
the file saver library guys. So file saver

04:49.000 --> 04:56.000
it contains the method called as kras and
here we will provide the pdf blob object and

04:56.000 --> 05:03.000
here we need to give it a file name and you
can give any file name output.pdf. So that's

05:03.000 --> 05:08.000
all. Now if you reload the application if
it is compiled successfully. So if you go

05:08.000 --> 05:15.000
to localhost 4200 you will now see the button
out there. If you click that button you will

05:15.000 --> 05:26.000
see the output.pdf file. You can see the
name is the email is like this. So I think

05:26.000 --> 05:34.000
this paragraph tag is also coming so we can
simply delete that like this. So now if you

05:35.000 --> 05:48.000
refresh it you can see that it has converted
the HTML template and for the new line character

05:48.000 --> 05:55.000
if you basically want you can see this coming
in a new line. So if I say lot of spaces if

05:55.000 --> 06:03.000
I do here then if you refresh you can customize
this template you will see lot more spaces

06:03.000 --> 06:10.000
will be there. You can see that. Same thing
here guys you can export HTML template, dynamic

06:10.000 --> 06:15.000
HTML template into video document using js,
pdf and file saver. All the source code is

06:15.000 --> 06:19.000
given in the description of this video. Thank
you very much for watching this. I will be

06:19.000 --> 06:20.000
seeing you in the next one