-
Notifications
You must be signed in to change notification settings - Fork 0
/
tmp2.html
102 lines (95 loc) · 2.96 KB
/
tmp2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html>
<head>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
display: block;
width: auto;
height: 100vh;
}
</style>
</head>
<body>
<div>
<input type="file" id="fileInput">
<button id="prevPage">이전 페이지</button>
<button id="nextPage">다음 페이지</button>
<span>현재 페이지: <span id="pageNum">1</span> / <span id="pageCount">1</span></span>
</div>
<canvas id="pdfCanvas"></canvas>
<script>
var pdfDoc = null;
var pageNum = 1;
var pageRendering = false;
var pageNumPending = null;
var canvas = document.getElementById('pdfCanvas');
var ctx = canvas.getContext('2d');
function renderPage(num) {
pageRendering = true;
pdfDoc.getPage(num).then(function(page) {
var viewport = page.getViewport({ scale: 1 });
var scale = Math.min(canvas.clientWidth / viewport.width, canvas.clientHeight / viewport.height);
var scaledViewport = page.getViewport({ scale: scale });
canvas.height = scaledViewport.height;
canvas.width = scaledViewport.width;
var renderContext = {
canvasContext: ctx,
viewport: scaledViewport
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function() {
pageRendering = false;
if (pageNumPending !== null) {
renderPage(pageNumPending);
pageNumPending = null;
}
});
});
document.getElementById('pageNum').textContent = num;
}
function queueRenderPage(num) {
if (pageRendering) {
pageNumPending = num;
} else {
renderPage(num);
}
}
document.getElementById('prevPage').addEventListener('click', function() {
if (pageNum <= 1) {
return;
}
pageNum--;
queueRenderPage(pageNum);
});
document.getElementById('nextPage').addEventListener('click', function() {
if (pageNum >= pdfDoc.numPages) {
return;
}
pageNum++;
queueRenderPage(pageNum);
});
document.getElementById('fileInput').addEventListener('change', function(event) {
var file = event.target.files[0];
if (file) {
var fileReader = new FileReader();
fileReader.onload = function() {
var arrayBuffer = fileReader.result;
pdfjsLib.getDocument(arrayBuffer).promise.then(function(pdfDoc_) {
pdfDoc = pdfDoc_;
document.getElementById('pageCount').textContent = pdfDoc.numPages;
pageNum = 1;
queueRenderPage(pageNum);
});
};
fileReader.readAsArrayBuffer(file);
}
});
</script>
</body>
</html>