利用pdfjs实现的pdf预览简单demo
实现方式
该demo采用html实现，然后js什么的都引用线上的，主要呈现思路，有需要的话，可以摘取页面实现部分思路二次开发，或直接封装使用。
demo展示
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF.js Demo</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
canvas {
border: 1px solid black;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>PDF.js Demo</h1>
<button onclick="previousPage()">Previous Page</button>
<button onclick="nextPage()">Next Page</button>
<div>
Page <span id="page_num"></span> of <span id="page_count"></span>
</div>
<canvas id="pdf_renderer"></canvas>
<script src="https://cdn.bootcdn.net/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
<script>
let pdfDoc = null,
pageNum = 1,
pageRendering = false,
pageNumPending = null,
canvas = document.getElementById('pdf_renderer'),
ctx = canvas.getContext('2d');
function renderPage(num) {
pageRendering = true;
pdfDoc.getPage(num).then(function(page) {
let viewport = page.getViewport({scale: 1.5});
canvas.height = viewport.height;
canvas.width = viewport.width;
let renderContext = {
canvasContext: ctx,
viewport: viewport
};
let renderTask = page.render(renderContext);
renderTask.promise.then(function() {
pageRendering = false;
if (pageNumPending !== null) {
renderPage(pageNumPending);
pageNumPending = null;
}
});
});
document.getElementById('page_num').textContent = num;
}
function queueRenderPage(num) {
if (pageRendering) {
pageNumPending = num;
} else {
renderPage(num);
}
}
function nextPage() {
if (pageNum >= pdfDoc.numPages) {
return;
}
pageNum++;
queueRenderPage(pageNum);
}
function previousPage() {
if (pageNum <= 1) {
return;
}
pageNum--;
queueRenderPage(pageNum);
}
// Load PDF document
const url = '自己的文件的路径';
pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
pdfDoc = pdfDoc_;
document.getElementById('page_count').textContent = pdfDoc.numPages;
renderPage(pageNum);
});
</script>
</body>
</html>
总结
好的你绝对看不出博主在水文章，这个是博主之前解决一个项目难题积累下的，希望或多或少能够帮助你们。
