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

动手实现一个PDF阅读器

article 2025/2/25 3:10:24

1、简介

使用 pdf.js 库加载和显示 PDF 文件。
实现了翻页、缩放功能。
提供了基本的错误处理。
功能特点：
支持选择本地 PDF 文件。
可以逐页查看 PDF 内容。
支持放大缩小功能。
界面简洁，易于使用。

2、使用方法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>PDF 阅读器@编码小哥</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        .upload-area {
            padding: 20px;
            border: 2px dashed #ccc;
            text-align: center;
            margin-bottom: 20px;
        }
        #pdfContainer {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        canvas {
            max-width: 100%;
            height: auto;
        }
        .controls {
            margin-top: 20px;
            text-align: center;
        }
        button {
            padding: 5px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            margin: 0 5px;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>PDF 阅读器</h1>
        
        <!-- 文件上传区域 -->
        <div class="upload-area">
            <input type="file" id="pdfInput" accept=".pdf" style="display: none;">
            <button onclick="document.getElementById('pdfInput').click()">选择 PDF 文件</button>
        </div>

        <!-- PDF 显示区域 -->
        <div id="pdfContainer"></div>

        <!-- 控制按钮 -->
        <div class="controls">
            <button onclick="previousPage()">上一页</button>
            <button onclick="nextPage()">下一页</button>
            <button onclick="zoomIn()">放大</button>
            <button onclick="zoomOut()">缩小</button>
        </div>
    </div>

    <!-- 引入 pdf.js 库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.7.570/pdf.min.js"></script>
    
    <script>
        let pdfDoc = null;
        let currentPage = 1;
        let scale = 1; // 初始缩放比例
        
        // 加载 PDF 文件
        document.getElementById('pdfInput').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    loadPdf(e.target.result);
                };
                reader.readAsArrayBuffer(file);
            }
        });

        // 加载 PDF 内容
        async function loadPdf(arrayBuffer) {
            try {
                pdfDoc = await pdfjsLib.getDocument(arrayBuffer).promise;
                displayPage(currentPage);
            } catch (error) {
                console.error('无法加载 PDF 文件:', error);
            }
        }

        // 显示指定页码的内容
        async function displayPage(pageNum) {
            const page = await pdfDoc.getPage(pageNum);
            
            const viewport = page.getViewport({ scale: scale });
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');

            canvas.width = viewport.width;
            canvas.height = viewport.height;

            // 渲染页面
            await page.render({
                canvasContext: ctx,
                viewport: viewport
            });

            // 清除之前的 PDF 内容并添加新的
            const pdfContainer = document.getElementById('pdfContainer');
            pdfContainer.innerHTML = '';
            pdfContainer.appendChild(canvas);
        }

        // 上一页
        function previousPage() {
            if (currentPage > 1) {
                currentPage--;
                displayPage(currentPage);
            }
        }

        // 下一页
        function nextPage() {
            if (currentPage < pdfDoc.numPages) {
                currentPage++;
                displayPage(currentPage);
            }
        }

        // 放大
        function zoomIn() {
            scale += 0.2;
            if (scale > 2) { // 设置最大缩放比例
                scale = 2;
            }
            displayPage(currentPage);
        }

        // 缩小
        function zoomOut() {
            scale -= 0.2;
            if (scale < 0.1) {
                scale = 0.1;
            }
            displayPage(currentPage);
        }
    </script>
</body>
</html>

将上述代码保存为一个 HTML 文件（例如 pdf-reader.html）。
打开浏览器，加载该文件。
选择 PDF 文件进行查看。
使用控制按钮进行翻页和缩放操作。