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

呼啦啦呼啦啦啦啦啦啦2025-07-19 2:07

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

文章目录

实现方式

demo展示

总结

实现方式

该demo采用html实现，然后js什么的都引用线上的，主要呈现思路，有需要的话，可以摘取页面实现部分思路二次开发，或直接封装使用。

demo展示

代码如下：

c 复制代码

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

总结

好的你绝对看不出博主在水文章，这个是博主之前解决一个项目难题积累下的，希望或多或少能够帮助你们。