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

利用pdfjs实现的pdf预览简单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>

总结

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

相关推荐
Zuckjet_1 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
bitbitDown3 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
YAY_tyy3 小时前
【JavaScript 性能优化实战】第六篇:性能监控与自动化优化
javascript·性能优化·自动化
gnip4 小时前
实现AI对话光标跟随效果
前端·javascript
安东尼肉店4 小时前
Android compose屏幕适配终极解决方案
android
2501_916007474 小时前
HTTPS 抓包乱码怎么办?原因剖析、排查步骤与实战工具对策(HTTPS 抓包乱码、gzipbrotli、TLS 解密、iOS 抓包)
android·ios·小程序·https·uni-app·iphone·webview
闭着眼睛学算法5 小时前
【华为OD机考正在更新】2025年双机位A卷真题【完全原创题解 | 详细考点分类 | 不断更新题目 | 六种主流语言Py+Java+Cpp+C+Js+Go】
java·c语言·javascript·c++·python·算法·华为od
烛阴5 小时前
【TS 设计模式完全指南】构建你的专属“通知中心”:深入观察者模式
javascript·设计模式·typescript
lumi.5 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰5 小时前
vue核心原理实现
前端·javascript·vue.js