Skip to content

Commit 0889312

Browse files
hulyakhulyak
committed
Update the code
1 parent a696109 commit 0889312

File tree

2 files changed

+83
-93
lines changed

2 files changed

+83
-93
lines changed

‎index.html

+17-22
Original file line numberDiff line numberDiff line change
@@ -7,53 +7,48 @@
77
<title>PDF Viewer in jQuery</title>
88
<link
99
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=="
10+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
1211
crossorigin="anonymous"
1312
referrerpolicy="no-referrer"
1413
/>
14+
<link
15+
rel="stylesheet"
16+
href="https://cdnjs.cloudflare.com/ajax/libs/print-js/1.6.0/print.css"
17+
crossorigin="anonymous"
18+
referrerpolicy="no-referrer"
19+
/>
20+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
1521
<link rel="stylesheet" href="style.css" />
1622
</head>
1723
<body>
1824
<header>
1925
<ul class="navigation">
2026
<li class="navigation__item">
21-
<!-- Navigate to the Previous and Next pages -->
22-
<a href="#" class="previous round" id="prev-page"
27+
<a href="#" class="previous round" id="prev_page"
2328
><i class="fas fa-arrow-left"></i
2429
></a>
25-
26-
<!-- Navigate to a specific page -->
2730
<input type="number" value="1" id="current_page" />
28-
29-
<a href="#" class="next round" id="next-page"
31+
<a href="#" class="next round" id="next_page"
3032
><i class="fas fa-arrow-right"></i
3133
></a>
32-
33-
<!-- Page Info -->
34-
Page <span id="page_num"></span> of
35-
<span id="page_count"></span>
34+
Page <span id="page_num">1</span> of <span id="page_count">1</span>
3635
</li>
37-
38-
<!-- Zoom In and Out -->
3936
<li class="navigation__item">
4037
<button class="zoom" id="zoom_in">
4138
<i class="fas fa-search-plus"></i>
4239
</button>
43-
4440
<button class="zoom" id="zoom_out">
4541
<i class="fas fa-search-minus"></i>
4642
</button>
4743
</li>
44+
<li class="navigation__item">
45+
<button class="print-button">
46+
<i class="fa-solid fa-print"></i>
47+
</button>
48+
</li>
4849
</ul>
4950
</header>
50-
51-
<!-- canvas to place the PDF -->
5251
<canvas id="canvas" class="canvas__container"></canvas>
53-
<!-- jQuery CDN -->
54-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
55-
<!-- pdf.js CDN -->
56-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/pdf.min.js"></script>
57-
<script src="index.js"></script>
52+
<script type="module" src="index.js"></script>
5853
</body>
5954
</html>

‎index.js

+66-71
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
1-
const $pdf = 'document.pdf';
1+
const pdf = 'document.pdf';
22

3-
const $initialState = {
3+
// Import the necessary module from pdf.js
4+
import { GlobalWorkerOptions, getDocument } from 'https://cdn.jsdelivr.net/npm/[email protected]/build/pdf.min.mjs';
5+
6+
// Set worker source
7+
GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/[email protected]/build/pdf.worker.min.mjs';
8+
9+
const initialState = {
410
pdfDoc: null,
511
currentPage: 1,
612
pageCount: 0,
@@ -9,97 +15,86 @@ const $initialState = {
915

1016
// Render the page
1117
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 });
18+
initialState.pdfDoc.getPage(initialState.currentPage).then((page) => {
19+
const canvas = $("#canvas")[0];
20+
const ctx = canvas.getContext("2d");
21+
const viewport = page.getViewport({ scale: initialState.zoom });
1922

20-
canvas.height = $viewport.height;
21-
canvas.width = $viewport.width;
23+
canvas.height = viewport.height;
24+
canvas.width = viewport.width;
2225

2326
// Render PDF page into canvas context
2427
const renderCtx = {
25-
canvasContext: $ctx,
26-
viewport: $viewport,
28+
canvasContext: ctx,
29+
viewport: viewport,
2730
};
2831

2932
page.render(renderCtx);
3033

31-
$('#page_num').html($initialState.currentPage);
34+
// Update current page number
35+
$("#page_num").text(initialState.currentPage);
3236
});
3337
};
3438

3539
// Load the Document
36-
pdfjsLib
37-
.getDocument($pdf)
38-
.promise.then((doc) => {
39-
$initialState.pdfDoc = doc;
40-
console.log('pdfDocument', $initialState.pdfDoc);
40+
getDocument(pdf).promise.then((data) => {
41+
initialState.pdfDoc = data;
42+
$("#page_count").text(initialState.pdfDoc.numPages);
4143

42-
$('#page_count').html($initialState.pdfDoc.numPages);
44+
renderPage();
45+
}).catch((err) => {
46+
alert(err.message);
47+
});
4348

44-
renderPage();
45-
})
46-
.catch((err) => {
47-
alert(err.message);
48-
});
49+
// Show Previous Page
50+
const showPrevPage = () => {
51+
if (initialState.pdfDoc === null || initialState.currentPage <= 1) return;
52+
initialState.currentPage--;
53+
$("#current_page").val(initialState.currentPage);
54+
renderPage();
55+
};
4956

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);
57+
// Show Next Page
58+
const showNextPage = () => {
59+
if (initialState.pdfDoc === null || initialState.currentPage >= initialState.pdfDoc.numPages) return;
60+
initialState.currentPage++;
61+
$("#current_page").val(initialState.currentPage);
5562
renderPage();
56-
}
63+
};
5764

58-
function showNextPage() {
59-
if (
60-
$initialState.pdfDoc === null ||
61-
$initialState.currentPage >= $initialState.pdfDoc._pdfInfo.numPages
62-
)
63-
return;
65+
// Zoom In
66+
const zoomIn = () => {
67+
if (initialState.pdfDoc === null) return;
68+
initialState.zoom *= 1.25;
69+
renderPage();
70+
};
6471

65-
$initialState.currentPage++;
66-
$('#current_page').val($initialState.currentPage);
72+
// Zoom Out
73+
const zoomOut = () => {
74+
if (initialState.pdfDoc === null) return;
75+
initialState.zoom *= 0.8;
6776
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-
// get the key code
78-
const $keycode = event.keyCode ? event.keyCode : event.which;
79-
if ($keycode === 13) {
80-
// get the new page number and render it
81-
let desiredPage = $('#current_page')[0].valueAsNumber;
82-
83-
$initialState.currentPage = Math.min(
84-
Math.max(desiredPage, 1),
85-
$initialState.pdfDoc._pdfInfo.numPages
86-
);
87-
renderPage();
77+
};
8878

89-
$('#current_page').val($initialState.currentPage);
90-
}
91-
});
79+
// Bind events using jQuery
80+
$("#prev_page").on("click", showPrevPage);
81+
$("#next_page").on("click", showNextPage);
82+
$("#zoom_in").on("click", zoomIn);
83+
$("#zoom_out").on("click", zoomOut);
9284

93-
// Zoom functionality
94-
$('#zoom_in').on('click', () => {
95-
if ($initialState.pdfDoc === null) return;
96-
$initialState.zoom *= 4 / 3;
85+
// Keypress Event for jumping to a page
86+
$("#current_page").on("keypress", (event) => {
87+
if (initialState.pdfDoc === null) return;
9788

98-
renderPage();
89+
if (event.keyCode === 13) {
90+
let desiredPage = parseInt($("#current_page").val());
91+
initialState.currentPage = Math.min(Math.max(desiredPage, 1), initialState.pdfDoc.numPages);
92+
$("#current_page").val(initialState.currentPage);
93+
renderPage();
94+
}
9995
});
10096

101-
$('#zoom_out').on('click', () => {
102-
if ($initialState.pdfDoc === null) return;
103-
$initialState.zoom *= 2 / 3;
104-
renderPage();
97+
// Optional Print Support
98+
$(".print-button").on("click", () => {
99+
window.print();
105100
});

0 commit comments

Comments
 (0)