html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pdf VIEWER</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css">
</head>
<body>
<div class="top-bar">
<button id="prev-page" class="btn"><i class="fas fa-arrow-circle-left"></i>Prev Page</button>
<button id="next-page" class="btn">Next Page<i class="fas fa-arrow-circle-right"></i></button>
<span class="page-info">Page <span id="page-num"></span> of <span id="page-count"></span></span>
</div>
<canvas id="pdf-render"></canvas>
</body>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script src="js/main.js"></script>
</html>
CSS代码：
* {
margin: 0;
padding: 0;
}
canvas {
width: 100%;
}
.top-bar {
background-color: #333;
color: #fff;
padding: 1rem;
}
.btn {
background: coral;
color: #fff;
border: none;
outline: none;
cursor: pointer;
padding: 0.7rem 2rem;
}
.btn:hover {
opacity: 0.9;
}
.page-info {
margin-left: 1rem;
}
.error {
background-color: orangered;
color: #fff;
padding: 1rem;
}
JS代码
const url = '../bronch.pdf';
let pdfDoc = null,
pageNum = 1,
pageIsRendering = false,
pageNumIsPending = null;
const scale = 1.5,
canvas = document.querySelector('#pdf-render'),
ctx = canvas.getContext('2d');
//render the page
const renderPage = num => {
pageIsRendering = true;
//get page
pdfDoc.getPage(num).then(page => {
//set scale
const viewport = page.getViewport({ scale });
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderCtx = {
canvasContext: ctx,
viewport
}
page.render(renderCtx).promise.then(() => {
pageIsRendering = false;
if (pageNumIsPending !== null) {
renderPage(pageNumIsPending);
pageNumIsPending = null;
}
});
//output current page
document.querySelector('#page-num').textContent = num;
console.log(page);
});
}
//check for pages rendering
const queueRenderPage = num => {
if (pageIsRendering) {
pageNumIsPending = num;
} else {
renderPage(num);
}
}
//show prev page
const showPrevPage = () => {
if (pageNum <= 1) {
return;
}
pageNum--;
queueRenderPage(pageNum);
};
//show next page
const showNextPage = () => {
if (pageNum >= pdfDoc.numPages) {
return;
}
pageNum++;
queueRenderPage(pageNum);
};
//Get Document
//因为之前设置了全局的pdfDoc , 这里传递的pdfDoc_ 是从js获取的对象，所以要把这个对象赋值到全部的pdfDoc变量
pdfjsLib.getDocument(url).promise.then(pdfDoc_ => {
pdfDoc = pdfDoc_;
document.querySelector('#page-count').textContent = pdfDoc.numPages;
renderPage(pageNum);
console.log(pdfDoc);
}).catch(err => {
//display error
const div = document.createElement('div');
div.className = 'error';
div.appendChild(document.createTextNode(err.message));
document.querySelector('body').insertBefore(div, canvas);
//remove top bar
document.querySelector('.top-bar').style.display = 'none';
});
//prev and next button event listener
document.querySelector('#prev-page').addEventListener('click', showPrevPage);
document.querySelector('#next-page').addEventListener('click', showNextPage);
