在线PDF阅读方案：jQuery + PDF.js-CSDN博客

本文链接：https://blog.csdn.net/xiediy/article/details/147759153

<!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>