Skip to content

Commit 257b2b4

Browse files
hulyakhulyak
committed
initial commit
0 parents  commit 257b2b4

File tree

4 files changed

+266
-0
lines changed

4 files changed

+266
-0
lines changed

‎document.pdf

179 KB
Binary file not shown.

‎index.html

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>PDF Viewer in jQuery</title>
8+
<link
9+
rel="stylesheet"
10+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
11+
integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
12+
crossorigin="anonymous"
13+
referrerpolicy="no-referrer"
14+
/>
15+
<link rel="stylesheet" href="style.css" />
16+
</head>
17+
<body>
18+
<header>
19+
<ul class="navigation">
20+
<li class="navigation__item">
21+
<!-- page 1 of 5 -->
22+
<a href="#" class="previous round" id="prev-page"
23+
><i class="fas fa-arrow-left"></i
24+
></a>
25+
26+
<input type="number" value="1" id="current_page" />
27+
28+
<a href="#" class="next round" id="next-page"
29+
><i class="fas fa-arrow-right"></i
30+
></a>
31+
32+
Page <span id="page_num"></span> of
33+
<span id="page_count"></span>
34+
</li>
35+
36+
<li class="navigation__item">
37+
<button class="zoom" id="zoom_in">
38+
<i class="fas fa-search-plus"></i>
39+
</button>
40+
41+
<button class="zoom" id="zoom_out">
42+
<i class="fas fa-search-minus"></i>
43+
</button>
44+
</li>
45+
</ul>
46+
</header>
47+
48+
<!-- canvas to place the PDF -->
49+
<canvas id="canvas" class="canvas__container">
50+
Your browser does not support the HTML5 canvas tag.
51+
</canvas>
52+
<!-- jQuery CDN -->
53+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
54+
<!-- CDN pdf.js -->
55+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/pdf.min.js"></script>
56+
<script src="index.js"></script>
57+
</body>
58+
</html>

‎index.js

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
const $pdf = 'document.pdf';
2+
3+
const $initialState = {
4+
pdfDoc: null,
5+
currentPage: 1,
6+
pageCount: 0,
7+
zoom: 1,
8+
};
9+
10+
// Render the page
11+
const renderPage = () => {
12+
// load the first page
13+
$initialState.pdfDoc.getPage($initialState.currentPage).then((page) => {
14+
console.log('page', page);
15+
16+
const canvas = $('#canvas')[0];
17+
const $ctx = canvas.getContext('2d');
18+
const $viewport = page.getViewport({ scale: $initialState.zoom });
19+
20+
canvas.height = $viewport.height;
21+
canvas.width = $viewport.width;
22+
23+
// Render PDF page into canvas context
24+
const renderCtx = {
25+
canvasContext: $ctx,
26+
viewport: $viewport,
27+
};
28+
29+
page.render(renderCtx);
30+
31+
$('#page_num').html($initialState.currentPage);
32+
});
33+
};
34+
35+
// Load the Document
36+
pdfjsLib
37+
.getDocument($pdf)
38+
.promise.then((doc) => {
39+
$initialState.pdfDoc = doc;
40+
console.log('pdfDocument', $initialState.pdfDoc);
41+
42+
$('#page_count').html($initialState.pdfDoc.numPages);
43+
44+
renderPage();
45+
})
46+
.catch((err) => {
47+
alert(err.message);
48+
});
49+
50+
function showPrevPage() {
51+
if ($initialState.pdfDoc === null || $initialState.currentPage <= 1) return;
52+
$initialState.currentPage--;
53+
// render the current page
54+
$('#current_page').val($initialState.currentPage);
55+
renderPage();
56+
}
57+
58+
function showNextPage() {
59+
if (
60+
$initialState.pdfDoc === null ||
61+
$initialState.currentPage >= $initialState.pdfDoc._pdfInfo.numPages
62+
)
63+
return;
64+
65+
$initialState.currentPage++;
66+
$('#current_page').val($initialState.currentPage);
67+
renderPage();
68+
}
69+
70+
// Button Events
71+
$('#prev-page').click(showPrevPage);
72+
$('#next-page').click(showNextPage);
73+
74+
// Display a Specific Page
75+
$('#current_page').on('keypress', (event) => {
76+
if ($initialState.pdfDoc === null) return;
77+
78+
const $keycode = event.keyCode ? event.keyCode : event.which;
79+
80+
if ($keycode === 13) {
81+
// get the new page number and render it
82+
let desiredPage = $('#current_page')[0].valueAsNumber;
83+
if (
84+
desiredPage >= 1 &&
85+
desiredPage <= $initialState.pdfDoc._pdfInfo.numPages
86+
) {
87+
$initialState.currentPage = desiredPage;
88+
renderPage();
89+
}
90+
}
91+
});
92+
93+
$('#zoom_in').on('click', () => {
94+
if ($initialState.pdfDoc === null) return;
95+
$initialState.zoom += 0.3;
96+
renderPage();
97+
});
98+
99+
$('#zoom_out').on('click', () => {
100+
if ($initialState.pdfDoc === null) return;
101+
$initialState.zoom -= 0.3;
102+
renderPage();
103+
});

‎style.css

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
font-family: 'Roboto', sans-serif;
7+
}
8+
9+
a {
10+
text-decoration: none;
11+
display: inline-block;
12+
padding: 4px 6px;
13+
color: #fff;
14+
margin: 0.1rem;
15+
cursor: pointer;
16+
}
17+
18+
a:hover,
19+
.zoom:hover {
20+
background-color: #ddd;
21+
color: #0075f2;
22+
opacity: 0.8;
23+
}
24+
25+
.navigation {
26+
background-color: #bbb;
27+
color: #000;
28+
padding: 0.3rem;
29+
list-style: none;
30+
display: flex;
31+
align-items: center;
32+
justify-content: space-between;
33+
}
34+
35+
.navigation__item {
36+
margin: 0.7rem;
37+
}
38+
39+
input[type='file'] {
40+
display: none;
41+
}
42+
43+
.custom-file-upload {
44+
border: 1px solid #ccc;
45+
border-radius: 4px;
46+
display: inline-block;
47+
padding: 10px;
48+
cursor: pointer;
49+
background: #4a8fed;
50+
color: #fff;
51+
font: inherit;
52+
font-size: 20px;
53+
font-weight: bold;
54+
text-align: center;
55+
width: 100%;
56+
}
57+
58+
.previous {
59+
background-color: #f1f1f1;
60+
color: black;
61+
}
62+
63+
.next {
64+
background-color: #4a8fed;
65+
color: white;
66+
}
67+
68+
.round {
69+
border-radius: 50%;
70+
}
71+
72+
.canvas__container {
73+
display: flex;
74+
justify-content: center;
75+
align-items: center;
76+
flex-direction: column;
77+
margin: 0 auto;
78+
}
79+
80+
.zoom {
81+
color: #005bac;
82+
outline: #fff;
83+
border: 1px solid #005bac;
84+
border-radius: 50%;
85+
padding: 12px 12px;
86+
text-align: center;
87+
transition: all 0.3s ease;
88+
font-size: 1rem;
89+
}
90+
91+
input[type='number'] {
92+
-moz-appearance: textfield;
93+
appearance: textfield;
94+
margin: 0;
95+
text-align: center;
96+
width: 20%;
97+
height: 2rem;
98+
font-size: 1rem;
99+
}
100+
101+
input[type='number']::-webkit-inner-spin-button,
102+
input[type='number']::-webkit-outer-spin-button {
103+
-webkit-appearance: none;
104+
margin: 0;
105+
}

0 commit comments

Comments
 (0)