Up next in 10
Build a React.js PDF Viewer & Editor With Controls Using pdfjs-dist Library in Browser Using JSX
29 views
Jun 3, 2025
Get the full source code of application here: https://codingshiksha.com/react/build-a-react-js-pdf-viewer-editor-with-controls-using-pdfjs-dist-library-in-browser-using-jsx/ 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 uh welcome to this video
0:02
uh so in this video we will look at how
0:05
to build this PDF uh viewer inside the
0:07
browser PDF editor uh using ReactJS and
0:11
you can see I'm running this application
0:13
locally uh there is a choose file button
0:16
uh as you simply select you can select
0:19
any PDF file here and as soon as you
0:21
select the file here you will see uh the
0:24
PDF viewer you can actually read your
0:27
PDF documents right here this is the
0:29
first page you can navigate to the
0:31
second page you can zoom in you can
0:35
rotate the page as well right left
0:38
everything you can do you can zoom in
0:41
zoom
0:42
out so this is a second page we have the
0:45
previous and the next page it will show
0:47
you total number of pages so you can see
0:50
that so it's a complete PDF viewer and
0:54
uh we are using a very popular ReactJS
0:57
package for this to build this PDF
1:00
viewer so just go to npmjs.com just
1:04
search for this package which is
1:09
pdfjs- so this is actually the package
1:11
that we are using for this
1:14
uh application right here it's almost
1:17
got 16 million 3.5 million weekly
1:21
downloads this is the official website
1:24
of this package it's called as PDFJS
1:26
library developed by Mosilla it's open
1:29
source so we'll be looking to do this
1:32
the command is simple you actually
1:34
install this
1:36
package
1:39
npmdfjs dis
1:42
uh specifically just install this
1:44
package here the version number which is
1:49
3.1174 this is will be the version that
1:52
we will be using for this application so
1:54
the command will look something like
1:56
this which is npm install
1:58
pdfjs disc at the rate
2:01
3.11.17 so just make sure that you
2:04
install this version so we are using the
2:07
latest version of react which is react
2:09
19 so now let me start building this
2:13
application from scratch here so just
2:15
build a very basic react functional
2:17
component right here so we built this
2:20
and after that now you just need to
2:23
import this package
2:25
here so for importing this package we
2:28
use the import statement import
2:30
everything as
2:31
PDFJS
2:35
lib and also we need to import
2:40
the CSS file it's not mandatory so we
2:44
will delete from here
2:46
so all the source code I've given in the
2:48
description of the video you can check
2:50
out and uh now we just need to set the
2:53
CDN
2:55
here so this is the global PDF workers
2:59
we are using the same version right here
3:02
3.11.174 so it is required so we just
3:06
pasted this now we need to declare some
3:09
state variables first of all the input
3:12
PDF document we'll be using the use
3:15
state hook for this
3:18
so use state will be automatically
3:21
imported
3:22
here then the second variable will be
3:25
for setting the page number initial
3:27
value will be one total number of pages
3:30
storing that zoom level 1.0 rotation
3:35
angle will be zero and then we need a
3:38
canvas reference and uh also file input
3:41
reference so these are all the state
3:43
variables which we have required for
3:46
this application so we have declared
3:48
everything there now coming back to the
3:51
JSX we need
3:56
to we
3:59
we need to
4:01
give inside this PDF viewer so we are
4:05
using custom CSS so we have just styled
4:07
these classes in the CSS so all the
4:11
source code you will get in the
4:12
description so inside this you will have
4:14
an H2 tag right here which will say PDF
4:17
viewer and right here we will allow the
4:20
user to simply select uh a PDF file
4:24
input type file we will only be
4:26
accepting PDF files and we have given a
4:28
reference to it file input ref and also
4:31
we have initialized a onchange event
4:33
handler so whenever user selects a file
4:35
this function will execute handle file
4:37
change so now we just need to execute
4:40
this function which will
4:43
execute once
4:45
we select the file so we will declare
4:48
this function handle file
4:52
change event will automatically get
4:54
passed right here so inside this we will
4:57
first of all get the reference of the
4:59
file here by using event dot
5:02
target.files
5:07
files and then we'll basically check if
5:10
it's a PDF file or not if it's not then
5:12
we'll show a alert message please select
5:15
a PDF file and then we'll use the file
5:17
reader API which is there in the browser
5:19
and inside this we will use this onload
5:23
function which will be async function so
5:25
right here we use this package here
5:27
PDFJS lib and it actually contains a
5:30
function where get document and we'll
5:33
read this like
5:36
this and we set the PDF document like
5:38
this set the total number of pages which
5:40
will be returned here in this object PDF
5:43
dot numbum pages you'll set the page
5:46
number one like this so if you try to
5:49
refresh your application uh you will
5:55
see I think the application is running
5:58
here local
6:04
host so it is saying that user ref is
6:07
not defined so just make sure that you
6:09
imported user ref right here
6:16
so so it will be imported here from the
6:19
app so if you refresh now you will see
6:21
this uh choose file button and if you
6:25
select a file
6:29
here and now to show that PDF document
6:32
we need to make changes in the JSX we
6:34
need to
6:36
update to show that uh PDF we need to
6:41
make sure after
6:44
this inside we compare here if the PDF
6:47
document is available and in that case
6:49
we need to show it and for showing it we
6:53
will be having a div tag which will have
6:56
a class name of
6:59
uh controls container and inside this we
7:03
will have another
7:07
div which will have a class of page
7:10
controls we'll have all the advanced
7:13
controls so the first button will be for
7:17
going to the previous page
7:27
so we'll attach an onclick listener to
7:30
this so which
7:34
will go to the previous page
7:38
and it will be disabled if the page
7:43
number is uh smaller
7:46
than so you will just put a condition
7:48
right here based upon that condition the
7:51
page will be disabled
7:56
so is equal to and page number variable
8:03
if
8:06
it's so this is your previous button
8:09
and
8:11
similarly after this we will actually
8:14
show
8:17
a inside the span tag we will show the
8:21
total number of pages which is the
8:22
active
8:25
page total pages and then we have the
8:28
next page we need to initialize this
8:30
function go to next page so this is your
8:33
previous and the next page
8:46
so so now for initializing that PDF file
8:50
we will show the PDF file in a PDF
8:53
canvas container so inside we have a PDF
8:56
container class inside this we are
8:58
checking if the PDF document is
9:00
available then we are showing it in the
9:02
canvas
9:04
tag and like this so right here if you
9:09
see we are setting this PDF
9:17
document and for rendering it for
9:20
rendering the PDF file here we will use
9:22
this code here which will be use effect
9:25
which will automatically execute as soon
9:27
as the component loads in the page
9:31
so use effect will automatically there
9:35
and inside this we will check if the PDF
9:39
document is available then we need to
9:41
render
9:42
it and this will be dependent upon all
9:46
these variables PDF document page number
9:48
scale and
9:50
rotation so render page
9:53
uh is a function which will be
9:56
responsible for rendering
9:58
the PDF
10:05
file so now we need to make this
10:08
function which will actually render
10:11
the PDF so for rendering it we will make
10:14
this function
10:17
render page and this will be a async
10:20
function which will actually hold the
10:21
page
10:24
number so inside this function we will
10:28
first of all get the page number await
10:31
you use this function which is available
10:33
in this library get page and pass the
10:37
page number and then we will get the
10:40
canvas reference and then get the 2D
10:43
context and then we will
10:47
actually draw the page on the
10:50
canvas by using this page.get Get
10:53
viewport canvas dot height whatever is
10:56
the height of the canvas same we will
10:59
get the width as well and then we
11:03
actually get the render context pass
11:06
both these information canvas context
11:09
and view port and lastly we will render
11:12
this page using the render function
11:14
you'll see
11:17
that so that's all that we need to do uh
11:19
if you refresh now you will see this
11:22
preview select a PDF file to view and if
11:24
you select a PDF file right here you
11:27
will see it will now display
11:33
the so it
11:38
is all the source code will be given in
11:41
the
11:50
description so I just made a typo
11:52
mistake here so just if you refresh now
11:55
you'll see these controls uh let me just
11:58
walk you through about all these
12:00
previous buttons so in the previous go
12:03
to previous page we are comparing in
12:05
this if condition if the page number is
12:07
greater than one then we are setting the
12:10
page number to be this we are
12:14
decrementing the page number value minus
12:16
one and in the next we are incrementing
12:19
it so previous page plus one zoom in
12:23
controls we are doing it you will see
12:25
this is the zoom in control this is a
12:27
zoom out control this is the
12:31
rotation clock counterclockwise you'll
12:34
see this is a complete PDF renderer and
12:37
editor guys that I developed it inside
12:39
using this free package all the source
12:41
code will be given in the description
12:43
which we have used this package pdfjs
12:46
test mozzilla it looks something like
12:49
this it's a single page application
12:51
where you simply allow the user to
12:53
select a PDF file and you will see we
12:55
have all the
12:57
controls so also check out my website
13:01
freemediatools.com which contains
13:03
thousands of tools regarding audio video
13:05
and image
#Programming
#Software