Aqqwq 2
Uploaded by
Li Hui LAqqwq 2
Uploaded by
Li Hui LHow to create a JavaScript PDF viewer | Envato Tuts+ https://webdesign.tutsplus.com/how-to-create-a-pdf-viewer-in-javascrip...
to create a fully fledged custom JavaScript PDF viewer from scratch.
1. Creating a User Interface
We’ll start this JS PDF viewer tutorial by creating a new web page and adding
the usual HTML5 boilerplate code to it.
Make your best
work yet
How? By signing up to receive tips,
tricks, and offers designed to make
you stand out.
Enter your email Sign up
Unsubscribe at any time.
Privacy Policy.
1 <!doctype html>
2
3 <html lang="en">
4 <head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <title>My PDF Viewer</title>
8 </head>
9 <body>
10
11 </body>
12 </html>
Next, inside the <body> , create a <div> element that can serve as a container
for our PDF viewer in JS.
1 <div id="my_pdf_viewer">
2
3 </div>
2 of 18 9/10/2025, 7:40 PM
How to create a JavaScript PDF viewer | Envato Tuts+ https://webdesign.tutsplus.com/how-to-create-a-pdf-viewer-in-javascrip...
At the heart of our JavaScript PDF viewer will be an HTML5 <canvas> element.
We’ll be rendering the pages of our PDF files inside it. So add the following
code inside the <div> element.
1 <div id="canvas_container">
2 <canvas id="pdf_renderer"></canvas>
3 </div>
To keep things simple, we’ll be rendering only one page inside the canvas at
any given time. We will, however, allow users to switch to the previous page or
the next page by pressing a button. Additionally, to display the current page
number, and to allow users to jump to any page they desire, our interface will
have an input field.
1 <div id="navigation_controls">
2 <button id="go_previous">Previous</button>
3 <input id="current_page" value="1" type="number"/>
4 <button id="go_next">Next</button>
5 </div>
To support zoom operations, add two more buttons to the interface: one to
zoom in and one to zoom out.
1 <div id="zoom_controls">
2 <button id="zoom_in">+</button>
3 <button id="zoom_out">-</button>
4 </div>
At the end of this section, the web page code looks like this.
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <title>My PDF Viewer</title>
7 </head>
8 <body>
9 <div id="my_pdf_viewer">
10 <div id="canvas_container">
11 <canvas id="pdf_renderer"></canvas>
12 </div>
13
14 <div id="navigation_controls"
3 of 18 9/10/2025, 7:40 PM
How to create a JavaScript PDF viewer | Envato Tuts+ https://webdesign.tutsplus.com/how-to-create-a-pdf-viewer-in-javascrip...
14 <div id="navigation_controls">
15 <button id="go_previous">Previous</button>
16 <input id="current_page" value="1" type="number"/>
17 <button id="go_next">Next</button>
18 </div>
19
20 <div id="zoom_controls">
21 <button id="zoom_in">+</button>
22 <button id="zoom_out">-</button>
23 </div>
24 </div>
25 </body>
26 </html>
2. Getting PDF.js
Now that a bare-bones user interface for our JavaScript PDF viewer is ready,
let’s add PDF.js to our web page. Because the latest version of the library is
available on CDNJS, we can do so by simply adding the following lines towards
the end of the web page.
1 <script
2 src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js">
3 </script>
If you prefer to use a local copy of the library, you can download it from
the pdfjs-dist repository.
3 . L o a d i n g a PD F F i le
Before we start loading a PDF file, let's create a simple JavaScript object to
store the state of our PDF viewer in JS. Inside it, we’ll have three items: a
reference to the PDF file itself, the current page index, and the current zoom
level.
1 <script>
2 var myState = {
3 pdf: null,
4 currentPage: 1
4 of 18 9/10/2025, 7:40 PM