0:00
Uh hello guys, in this video I'll show
0:02
you I built out a Canva clone kind of a
0:04
PDF editor directly in Vue.js. So this
0:07
is the overall project and we are
0:10
running this locally here to show you
0:12
the live demo. So this editor looks
0:15
something like this. So here you can
0:17
actually edit your PDF file. So this PDF
0:20
file I edited using this editor. So
0:22
simply it will show you the live preview
0:24
of all the pages. You click the pages
0:26
section and it shows you the total
0:28
number of pages which are there. So we
0:30
can even add text images, you can even
0:32
digitally sign your PDF file as well. So
0:36
I basically put this signature using
0:38
this editor. So you can just see here
0:41
you can place your own signature.
0:45
So here you can simply digitally sign
0:48
your PDF file here and just
0:52
so it is that easy and it's a
0:55
fullyfledged Vue.js JS project and all
0:58
the components are divided into its
1:00
appropriate file. So it's very easy for
1:02
you to modify the source code and the
1:04
link is given. You can directly purchase
1:06
the full source code. It's entirely
1:08
built inside uh Vue.js and we are using
1:11
JSPDF library. As you can see the latest
1:14
version of Vue.js is used and once you
1:16
purchase it all the source code will be
1:18
automatically downloaded from Google
1:20
Drive and it's very easy for you to
1:22
deploy this application as well. So as
1:24
we are running it on local host as you
1:26
can see npm rundev. So this actually
1:29
starts a local development server. Now
1:31
let me just start you by simply showing
1:34
you from scratch. So once you start this
1:38
application you simply actually select a
1:40
PDF file that you want to edit. After
1:42
that you click on the next step
1:45
and we have a number of options right
1:48
here. You can actually add a picture.
1:50
This shows you total number of pages
1:54
we have all the controls zoom in zoom
1:58
After that we can add some text here.
2:02
So here you can simply drag and drop
2:06
and just adjust the size here
2:09
accordingly. Then we also have the
2:11
capability to actually add.
2:15
So here you can add multiple images. So
2:17
as you select you'll see the picture
2:20
already exists. So here he uploaded some
2:23
images here. You can add this image as
2:25
watermark as well. So just click
2:27
watermark. So this will actually make
2:30
this image as a watermark. So you can
2:32
just see how easy it is.
2:36
You can just adjust the size here.
2:41
And then you can go to the next page.
2:43
And in this page, let's suppose you want
2:45
to digitally sign your place your
2:49
signature. So either you can upload an
2:51
image or you can digitally sign and just
2:53
place your signature. So it's has all
2:56
the features of Canva clone PDF editor.
2:58
As you can just see here, it's a single
3:03
All the processing is directly happening
3:05
in the browser. So once you are happy
3:07
with that, you can make the changes and
3:09
then it will create the output file for
3:10
you and then it will also once you
3:14
download, you can even encrypt your PDF
3:16
file as well. So here you can enter a
3:20
to encrypt and then the output file will
3:23
open. So if you enter a wrong password
3:26
it will not accept. So now if you enter
3:28
the correct password here this will be
3:30
your output file. So it contains this
3:32
watermark as you can just see also
3:35
contains the signature as well. So this
3:38
is a fullyfledged camera clone kind of a
3:40
PDF editor that I built entirely in
3:43
Vue.js. So if you're interested, the
3:45
link is given in the description. You
3:46
can directly purchase the full source
