Up next in 10
Build a Mozilla PDF.js PDF Editor Using jsPDF & Html2Canvas Web App in Browser Using HTML5 & JS
340 views
Apr 1, 2025
Buy the full source code of application here: https://procodestore.com/index.php/product/build-a-mozilla-pdf-js-pdf-editor-using-jspdf-html2canvas-web-app-in-browser-using-html5-js/ Watch My Visual Studio Code IDE Setup Video For Fonts,Themes & Extensions https://youtu.be/Bon8Pm1gbX8 Hi Join the official discord server to resolve doubts here: https://discord.gg/cRnjhk6nzW Visit my Online Free Media Tool Website https://freemediatools.com/ Buy Premium Scripts and Apps Here: https://procodestore.com/
View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I'll show you a PDF editor
0:04
that I developed which runs entirely in
0:06
the browser it's a static application
0:09
which doesn't require any server we have
0:11
built it inside HTML CSS and JavaScript
0:14
so you can see that we are running it on
0:17
locally and we have this interface open
0:20
PDF so here if you simply click this
0:23
button you will be able to select the
0:25
PDF file that you are editing so this is
0:27
the first page you can actually navigate
0:30
it is showing the page one of two you
0:33
can click the next page to go to the
0:35
next page right here and then we have
0:36
these controls out there you can
0:39
directly click on the PDF text right
0:42
here and you will be able to edit the
0:44
PDF text so you can see it very easily
0:47
adobe Acrobat functionality you are
0:50
getting it in the browser you will be
0:51
easily able to edit the PDF file
0:54
directly you can change
0:58
this hello world this is a sample PDF
1:02
file you can see we can directly change
1:05
the text very easily we can remove the
1:08
text as
1:10
well and uh after we modify we also have
1:14
the button to actually add images third
1:16
party images if you have some images
1:19
that you want to add you can add this so
1:23
you can see the image you can place this
1:25
as a watermark image you can control the
1:27
sizing of this
1:31
image just place it at the center of the
1:33
page and then we also
1:36
have zoom out functionality zoom in
1:39
functionality as
1:41
well you can see
1:43
that simply change it you will
2:00
see just add the image whichever
2:05
image so after you modify the changes
2:08
you simply click this save PDF button so
2:10
what it will do it will actually
2:13
uh save this changes you can see uh my
2:18
changes have been reflected in the
2:19
output file here so it's a simple PDF
2:21
editor guys which runs in the browser
2:23
it's also PDF renderer you can easily
2:25
read your files at the same time you can
2:27
even edit this just click on the element
2:30
and you can add some more
2:34
text can see that so after you modify
2:37
the changes you simply click this save
2:40
PDF button so you can see your changes
2:43
will be saved and for building this
2:46
application guys I'm using third party
2:49
uh open-source packages of JavaScript so
2:52
the link is given in the description if
2:54
you need the full source code of this
2:56
application the link is given in the
2:58
description so after purchasing the
3:01
source code you will get this zip file
3:03
from Google Drive automatically uh this
3:05
will contain these two files the HTML
3:08
file and the JavaScript file so this is
3:10
your uh HTML file for this we are using
3:14
uh Mozilla PDFJS uh JS PDF and HTML to
3:18
canvas so if you don't know about these
3:21
libraries let me show you mozilla PDFJS
3:24
which is a PDF renderer uh library for
3:27
actually rendering the PDF files
3:30
directly in the browser and then we are
3:33
using the JSPDF library which is used to
3:36
generate PDF files right in the browser
3:40
itself and then we are also using HTML
3:43
to canvas which actually is a library
3:45
for taking screenshots programmatically
3:48
using JavaScript directly in the browser
3:51
so if you want to take some screenshot
3:53
of a DOM element you use this uh HTML to
3:57
canvas library so we are using these
3:59
three libraries to build this so this is
4:01
your JavaScript file right here if you
4:06
see this is almost if you see
4:13
1,000,000 you can see over,000 lines of
4:16
code is there you will get everything if
4:18
you are a developer you can even extend
4:20
this PDF editor to add additional
4:22
features as well so it's a nice project
4:24
if you are a developer looking for a job
4:26
it will be a nice little practical
4:29
project which is a full PDF editor you
4:32
can actually purchase this project and
4:35
apply for a job you can have a resumeum
4:38
if you are a collegegoing student and
4:39
also it's a great little project that
4:42
you can purchase it the link is given in
4:44
the description guys and uh after
4:47
purchasing it it's very easy to directly
4:49
run in the browser you need a simple VS
4:51
code extension you can also deploy this
4:54
as well just right click serve this
4:57
project locally so you will see that the
4:59
application will open locally right
5:02
here then you whatever select your PDF
5:05
file whichever PDF file you want to
5:08
select and then of all these
5:17
options we can add text we can add
5:20
images
5:23
so after that we click save PDF you will
5:26
see the changes will reflected back so
5:28
thank you very much guys for watching
5:30
this if you're interested the link is
5:31
given you can directly purchase it and
5:34
uh also check out my website
5:37
freemediatools.com which contains
5:39
thousands of tools regarding audio video
5:41
and image and I will be seeing you in
5:44
the next video
#Clip Art & Animated GIFs
#Development Tools
#Flash-Based Entertainment
#Fun & Trivia
#Open Source
#Other