/
pdf.js
80 lines (65 loc) · 2.08 KB
/
pdf.js
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
import pdfJS from 'pdfjs-dist';
import 'pdfjs-dist/build/pdf.worker.entry';
function renderPDF(canvas) {
let currentPageNum = 1;
// Handle hidi
const outputScale = window.devicePixelRatio || 1;
function adjustCanvasSize(viewport) {
canvas.width = Math.floor(viewport.width * outputScale);
canvas.height = Math.floor(viewport.height * outputScale);
canvas.style.width = Math.floor(viewport.width) + 'px';
canvas.style.height = Math.floor(viewport.height) + 'px';
}
const loadingTask = pdfJS.getDocument(canvas.dataset.path);
(async () => {
const pdf = await loadingTask.promise;
let page = await pdf.getPage(1);
const viewport = page.getViewport({ scale: 1.5 });
const context = canvas.getContext('2d');
adjustCanvasSize(viewport);
canvas.classList.add('border', 'border-purple-500', 'rounded');
const transform = outputScale !== 1
? [outputScale, 0, 0, outputScale, 0, 0]
: null;
let renderContext = {
canvasContext: context,
transform,
viewport,
};
page.render(renderContext);
async function onPrevPage() {
if (currentPageNum <= 1) {
return;
}
currentPageNum -= 1;
page = await pdf.getPage(currentPageNum);
page.render(renderContext);
}
async function onNextPage() {
if (currentPageNum >= pdf.numPages) {
return;
}
currentPageNum += 1;
page = await pdf.getPage(currentPageNum);
page.render(renderContext);
}
async function onZoom(e) {
const newViewport = page.getViewport({ scale: parseFloat(e.target.value) });
adjustCanvasSize(newViewport);
renderContext.viewport = newViewport;
page = await pdf.getPage(currentPageNum);
page.render(renderContext);
}
document.querySelector('.js-next').addEventListener('click', onNextPage);
document.querySelector('.js-prev').addEventListener('click', onPrevPage)
document.querySelector('.js-zoom').addEventListener('click', onZoom)
})();
}
export default {
mounted() {
renderPDF(this.el);
},
updated() {
renderPDF(this.el);
},
};