Skip to content

Commit 8101813

Browse files
daviskamaudaviskamau
authored
code
1 parent 09ea17e commit 8101813

5 files changed

Lines changed: 161 additions & 0 deletions

File tree

‎pdf_viewer/README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# PDF Viewer
2+
3+
> Custom PDF viewer with pagination built with pdf.js

‎pdf_viewer/css/style.css‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
.top-bar {
7+
background: #333;
8+
color: #fff;
9+
padding: 1rem;
10+
}
11+
12+
.btn {
13+
background: coral;
14+
color: #fff;
15+
border: none;
16+
outline: none;
17+
cursor: pointer;
18+
padding: 0.7rem 2rem;
19+
}
20+
21+
.btn:hover {
22+
opacity: 0.9;
23+
}
24+
25+
.page-info {
26+
margin-left: 1rem;
27+
}
28+
29+
.error {
30+
background: orangered;
31+
color: #fff;
32+
padding: 1rem;
33+
}

‎pdf_viewer/docs/pdf.pdf‎

424 KB
Binary file not shown.

‎pdf_viewer/index.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
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.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<link
8+
rel="stylesheet"
9+
href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
10+
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
11+
crossorigin="anonymous"
12+
/>
13+
<link rel="stylesheet" href="css/style.css" />
14+
<title>PDF Viewer</title>
15+
</head>
16+
<body>
17+
<div class="top-bar">
18+
<button class="btn" id="prev-page">
19+
<i class="fas fa-arrow-circle-left"></i> Prev Page
20+
</button>
21+
<button class="btn" id="next-page">
22+
Next Page <i class="fas fa-arrow-circle-right"></i>
23+
</button>
24+
<span class="page-info">
25+
Page <span id="page-num"></span> of <span id="page-count"></span>
26+
</span>
27+
</div>
28+
29+
<canvas id="pdf-render"></canvas>
30+
31+
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
32+
<script src="js/main.js"></script>
33+
</body>
34+
</html>

‎pdf_viewer/js/main.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
const url = '../docs/pdf.pdf';
2+
3+
let pdfDoc = null,
4+
pageNum = 1,
5+
pageIsRendering = false,
6+
pageNumIsPending = null;
7+
8+
const scale = 1.5,
9+
canvas = document.querySelector('#pdf-render'),
10+
ctx = canvas.getContext('2d');
11+
12+
// Render the page
13+
const renderPage = num => {
14+
pageIsRendering = true;
15+
16+
// Get page
17+
pdfDoc.getPage(num).then(page => {
18+
// Set scale
19+
const viewport = page.getViewport({ scale });
20+
canvas.height = viewport.height;
21+
canvas.width = viewport.width;
22+
23+
const renderCtx = {
24+
canvasContext: ctx,
25+
viewport
26+
};
27+
28+
page.render(renderCtx).promise.then(() => {
29+
pageIsRendering = false;
30+
31+
if (pageNumIsPending !== null) {
32+
renderPage(pageNumIsPending);
33+
pageNumIsPending = null;
34+
}
35+
});
36+
37+
// Output current page
38+
document.querySelector('#page-num').textContent = num;
39+
});
40+
};
41+
42+
// Check for pages rendering
43+
const queueRenderPage = num => {
44+
if (pageIsRendering) {
45+
pageNumIsPending = num;
46+
} else {
47+
renderPage(num);
48+
}
49+
};
50+
51+
// Show Prev Page
52+
const showPrevPage = () => {
53+
if (pageNum <= 1) {
54+
return;
55+
}
56+
pageNum--;
57+
queueRenderPage(pageNum);
58+
};
59+
60+
// Show Next Page
61+
const showNextPage = () => {
62+
if (pageNum >= pdfDoc.numPages) {
63+
return;
64+
}
65+
pageNum++;
66+
queueRenderPage(pageNum);
67+
};
68+
69+
// Get Document
70+
pdfjsLib
71+
.getDocument(url)
72+
.promise.then(pdfDoc_ => {
73+
pdfDoc = pdfDoc_;
74+
75+
document.querySelector('#page-count').textContent = pdfDoc.numPages;
76+
77+
renderPage(pageNum);
78+
})
79+
.catch(err => {
80+
// Display error
81+
const div = document.createElement('div');
82+
div.className = 'error';
83+
div.appendChild(document.createTextNode(err.message));
84+
document.querySelector('body').insertBefore(div, canvas);
85+
// Remove top bar
86+
document.querySelector('.top-bar').style.display = 'none';
87+
});
88+
89+
// Button Events
90+
document.querySelector('#prev-page').addEventListener('click', showPrevPage);
91+
document.querySelector('#next-page').addEventListener('click', showNextPage);

0 commit comments

Comments
 (0)