WEBVTT

00:00.000 --> 00:05.960
Hello friends, today in this tutorial I will
basically show you a PDF editor and a PDF

00:05.960 --> 00:12.439
viewer where you can add your annotations,
drawing, you can modify the PDF documents

00:12.439 --> 00:18.159
So this is basically the application that
I developed inside HTML, CSS and JavaScript

00:18.159 --> 00:25.280
and it is using the JSPDF and HTML2 PDFJS
library and for rendering out the PDF we are

00:25.280 --> 00:33.000
using the PDFJS library. So this is the demo of the
application guys, you will see it on your screen right here

00:33.000 --> 00:37.840
If you load this application in the browser,
a PDF file will be loaded here and now you

00:37.840 --> 00:45.000
can draw annotations. So we have a pencil icon, you can
highlight anything here in the PDF document, you can

00:45.000 --> 00:52.360
highlight this one, this thing and you can
change the color, we have the drop down here

00:52.360 --> 00:59.200
you can change it to green color, red color,
you can just select any color of your choice

00:59.200 --> 01:05.160
and then we have this PDF viewer, you
can go to any page in the PDF document

01:05.160 --> 01:15.599
If you have multiple PDF
documents here, just load this

01:15.599 --> 01:21.160
So now you can see we have 14 pages right
here in this PDF document and we can navigate

01:21.160 --> 01:26.160
to the second page, third page, fourth page and
right here if you want to do some highlighting

01:26.160 --> 01:30.360
here, if you want to do annotation, let's
suppose I want to highlight this paragraph

01:30.360 --> 01:37.199
with this text here, we will select the pencil
icon, then we will select this or highlight

01:37.199 --> 01:42.919
this paragraph, you can see we are doing the
annotation, we have modified the PDF, we can

01:42.919 --> 01:49.000
even draw some shapes as well, you can even
draw a square shape to highlight something

01:49.000 --> 01:55.839
here, you can see that, so very easy stuff
guys, this is the application and we can even

01:55.839 --> 02:10.199
draw a circle as well,
this is a circle tool

02:10.199 --> 02:15.679
So this is the code which is available guys,
if you see index.html, you just need to load

02:15.679 --> 02:24.559
this code here in your file and then you
can add as many shapes as you want, you can

02:24.559 --> 02:31.839
add a circle here, you can even add an oval
as well like this, anything that you want

02:31.839 --> 02:36.279
to highlight guys, you can do that and place
it anywhere on the screen by this select tool

02:36.279 --> 02:41.199
which is available and then you can even draw
something here, so let's suppose if you want

02:41.199 --> 02:51.080
to draw, if you want to write something here in
the text area, you can change the highlighting

02:51.080 --> 03:05.639
here basically, just select this and write
something here, you can now see, we have success

03:05.639 --> 03:12.360
you can see that, we can just change it, you can even
change the font size as well, just select it from

03:12.360 --> 03:17.000
whichever font that you want, we can even
have arrows as well, if you want to highlight

03:17.000 --> 03:24.479
some arrows in the PDF document, you can even
do that also, we have this one also, if you

03:24.479 --> 03:29.720
want to do this, you can even do this, just
change it, green color, any color you can

03:29.720 --> 03:36.479
do, so you can navigate to the next page,
if you want to do this, you will see that

03:36.479 --> 03:41.559
it's very easy guys and if you want to add
an image, let's suppose we can also add an

03:41.559 --> 03:55.559
image, you can see, we can even clear out
this image and let's suppose I select this

03:55.679 --> 04:02.679
image, now I can even add this image at any
location, we can even add images, highlight

04:02.679 --> 04:10.679
annotate and its line width you can also control
by 8 pixels, so if you now have, you can see

04:10.679 --> 04:15.279
that, so you can basically hide something
in the PDF document, annotate, highlight

04:15.279 --> 04:19.320
you will see that, so the link is given guys
in the description of the video, if you want

04:19.320 --> 04:24.239
to get the full source code of this application,
this tool, you can purchase it from PayPal

04:24.239 --> 04:29.200
in United State dollar or you can go to Stripe.com
and make the payment in Indian Rupees, so

04:29.200 --> 04:36.399
I have made this tool and the libraries that
we have used is JSPDF and HTML2PDFJS library

04:36.399 --> 04:40.519
and after you make the changes guys, you just
need to simply click this button, so it will

04:40.519 --> 04:47.040
save the modified changes into a new PDF document,
so if you now open this, you will see all

04:47.040 --> 04:52.000
the highlighting which you have done in the
previous steps are being saved and this is

04:52.000 --> 04:58.279
the first page in the PDF document, this is
the next page, if you see, we have successfully

04:58.279 --> 05:05.079
added the image as well, so this is basically
the editor guys, nice little editor where

05:05.079 --> 05:23.720
we can edit the files in the PDF document,
so 14 pages are there, so in this way guys

05:23.720 --> 05:30.320
you can make the modifications and then export
your changes, whatever changes that you have

05:30.320 --> 05:37.920
done and it makes it very much easy, so the
link is given guys, you can directly purchase

05:37.920 --> 05:43.440
it and after that you will get a zip file,
you just need to extract it and then you just

05:43.440 --> 05:49.000
need to open this index.html file and this
application will load for you, if you want

05:49.000 --> 05:58.480
to change the PDF file guys, simply go to
the folder called as sample and here just

05:58.480 --> 06:05.200
inside your code, if you see in index.html,
you just need to, in the source directory

06:05.200 --> 06:11.880
we have javascript code, so just change and
paste your PDF file, whichever PDF file you

06:11.880 --> 06:19.920
need to edit and here you just need to, in
the sample, now let's suppose we want to load

06:19.920 --> 06:26.920
this file, next handbook, so now after you
make this change, this is our custom PDF file

06:26.920 --> 06:32.480
that we, so now it is loading this file, so
now you can see it has successfully loaded

06:32.480 --> 06:39.880
my custom PDF file here, so you can see that
it contains 54 pages and now I can basically

06:39.880 --> 06:50.000
highlight this file here, you can see, it's
very easy, if you want to save these changes

06:50.000 --> 07:02.880
save it and it will now save these changes,
so in this way guys, you can do this, if you

07:02.880 --> 07:24.279
want to highlight these changes, you can
see that, so in this way guys, you can do

07:24.279 --> 07:31.000
this and the link is given in the description
of the video, you can directly purchase the

07:31.000 --> 07:33.880
full source code and I will be
seeing you in the next video