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

在线PDF阅读方案：jQuery + PDF.js

news 来源：原创 2025/5/11 19:13:05

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>PDF 多页查看</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
</head>
<body><div><button id="prevPage" type="button">上一页</button><button id="nextPage" type="button">下一页</button><span>当前页：<span id="currentPage">1</span> / <span id="totalPages">?</span></span></div><canvas id="pdfCanvas"></canvas><script>$(document).ready(function() {var pdfUrl = "example.pdf";  // 替换成你的 PDF 文件路径var pdfDoc = null;var pageNum = 1;var scale = 1.5;function renderPage(num) {pdfDoc.getPage(num).then(function(page) {var viewport = page.getViewport({ scale: scale });var canvas = $("#pdfCanvas")[0];var context = canvas.getContext("2d");canvas.width = viewport.width;canvas.height = viewport.height;var renderContext = {canvasContext: context,viewport: viewport};page.render(renderContext);// 更新当前页码$("#currentPage").text(num);});}// 加载 PDF 并渲染第一页pdfjsLib.getDocument(pdfUrl).promise.then(function(pdf) {pdfDoc = pdf;$("#totalPages").text(pdf.numPages);renderPage(pageNum);});// 上一页$("#prevPage").click(function(event) {event.preventDefault(); // 阻止默认行为if (pageNum > 1) {pageNum--;renderPage(pageNum);}});// 下一页$("#nextPage").click(function(event) {event.preventDefault(); // 阻止默认行为if (pageNum < pdfDoc.numPages) {pageNum++;renderPage(pageNum);}});});</script>
</body>
</html>