PDF文件嵌入到MARKDOWN格式中的实现方法

时间：2025-3-10 23:26 作者：Anglei 分类： WEB应用
要实现PDF的分页预览（即每次只显示一页并支持翻页），可以通过修改PDF.js的渲染逻辑，结合翻页按钮控制页面导航。
代码如下：
<head>
    <meta charset="UTF-8">
    <!-- PDF.js库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
    <style>
        body {
            margin: 20px;
            font-family: Arial, sans-serif;
        }
        .pdf-controls {
            text-align: center;
            margin: 20px 0;
        }
        button {
            padding: 8px 16px;
            margin: 0 5px;
            cursor: pointer;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
        }
        button:disabled {
            background: #cccccc;
            cursor: not-allowed;
        }
        #pdfViewer {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            border: 1px solid #ddd;
        }
        canvas {
            width: 100% !important;
            height: auto !important;
        }
        .page-jump {
            display: inline-block;
            margin-left: 15px;
        }
        #pageInput {
            width: 50px;
            padding: 5px;
            margin: 0 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="pdf-controls">
        <button id="prevPage">上一页</button>
        <span id="currentPage">1</span> / 
        <span id="totalPages">1</span>
        <button id="nextPage">下一页</button>

        <div class="page-jump">
            <input type="number" id="pageInput" placeholder="页数" min="1">
            <button id="jumpButton">跳转</button>
        </div>
    </div>

    <div id="pdfViewer"></div>

    <script>
        // 安全防护
        document.addEventListener('contextmenu', e => e.preventDefault());
        document.addEventListener('keydown', e => {
            if (e.ctrlKey && (e.key === 's' || e.key === 'p')) e.preventDefault();
        });

        // PDF控制变量
        let currentPage = 1;
        let totalPages = 1;
        let pdfInstance = null;

        // 初始化PDF加载
        pdfjsLib.getDocument('这里添加你的pdf文件路径').promise.then(pdf => {
            pdfInstance = pdf;
            totalPages = pdf.numPages;

            // 更新界面元素
            document.getElementById('totalPages').textContent = totalPages;
            document.getElementById('pageInput').max = totalPages;

            // 初始渲染
            renderPage(currentPage);
            updateButtonState();
        }).catch(error => {
            console.error('PDF加载失败:', error);
        });

        // 页面渲染函数
        async function renderPage(pageNum) {
            const container = document.getElementById('pdfViewer');
            container.innerHTML = '';

            const page = await pdfInstance.getPage(pageNum);
            const canvas = document.createElement('canvas');
            container.appendChild(canvas);

            const viewport = page.getViewport({ scale: 1.5 });
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            await page.render({
                canvasContext: canvas.getContext('2d'),
                viewport: viewport
            });

            document.getElementById('currentPage').textContent = pageNum;
            updateButtonState();
        }

        // 按钮状态控制
        function updateButtonState() {
            document.getElementById('prevPage').disabled = (currentPage === 1);
            document.getElementById('nextPage').disabled = (currentPage === totalPages);
        }

        // 事件监听
        document.getElementById('prevPage').addEventListener('click', () => {
            if (currentPage > 1) {
                currentPage--;
                renderPage(currentPage);
            }
        });

        document.getElementById('nextPage').addEventListener('click', () => {
            if (currentPage < totalPages) {
                currentPage++;
                renderPage(currentPage);
            }
        });

        // 跳转功能
        document.getElementById('jumpButton').addEventListener('click', jumpToPage);
        document.getElementById('pageInput').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') jumpToPage();
        });

        function jumpToPage() {
            const inputPage = parseInt(document.getElementById('pageInput').value);

            if (isNaN(inputPage)) {
                alert("请输入有效的页码");
                return;
            }

            if (inputPage < 1 || inputPage > totalPages) {
                alert(`页码需在 1 到 ${totalPages} 之间`);
                return;
            }

            currentPage = inputPage;
            document.getElementById('pageInput').value = '';
            renderPage(currentPage);
        }
    </script>
</body>
本文完结，相关标签: pdf预览
看完后感想如何？
路过(0)	雷人(0)	握手(1)	鲜花(0)	鸡蛋(0)