当前位置：首页 > news >正文

利用pdfjs实现的pdf预览简单demo（包含翻页功能）

news 2025/7/18 17:21:52

利用pdfjs实现的pdf预览简单demo

文章目录
实现方式
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>