1、简介

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

2、使用方法

    
    
    


    

        
PDF 阅读器
        
        
        

            
            选择 PDF 文件
        

        
        


        
        

            上一页
            下一页
            放大
            缩小
        
    

    
    <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 displaypagecurrentpage function zoomin scale if scale> 2) { // 设置最大缩放比例
                scale = 2;
            }
            displayPage(currentPage);
        }

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

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

3、功能展示