如何在按钮点击事件中实现iframe内PDF翻至下一页？

嘿，这个需求我之前也帮人处理过，不过得先提一句：浏览器内置的PDF查看器对iframe的控制有不少限制，不同浏览器支持的方式也不一样，下面给你几个可行的方案，你可以根据自己的场景选择：

方案一：利用Chromium内核浏览器的内置PDF API（简单但有兼容性限制） #

Chrome、Edge这类基于Chromium的浏览器，它们的内置PDF查看器支持通过postMessage来接收控制指令，翻页就是其中之一。你可以直接修改你的点击事件代码：

$(document).ready(function(){
    $("#btnNextPage").click(function(){
        const iframe = document.getElementById('iframe');
        // 向iframe里的PDF查看器发送"下一页"指令
        iframe.contentWindow.postMessage({
            type: 'command',
            name: 'nextPage'
        }, '*');
    });
});

⚠️ 注意：这个方法只在Chromium内核的浏览器上生效，Firefox、Safari等其他浏览器的内置PDF查看器不支持这个消息协议，所以如果需要兼容这些浏览器，这个方案就不太适用了。

方案二：通用滚动翻页（适合单页纵向排版的PDF） #

如果你的PDF是被渲染成单页纵向流的（很多在线PDF预览会这么处理），可以通过计算iframe的可视高度，每次滚动一个页面的距离来模拟翻页：

$(document).ready(function(){
    $("#btnNextPage").click(function(){
        const iframe = document.getElementById('iframe');
        const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
        // 获取iframe的可视高度
        const viewportHeight = iframe.clientHeight;
        // 滚动到当前位置 + 可视高度
        iframeDoc.body.scrollTop += viewportHeight;
    });
});

这个方法的兼容性更好，但缺点是：如果PDF本身是分页排版（比如每页是独立的块），或者浏览器渲染PDF的方式导致高度计算不准，翻页的位置可能会有偏差。

方案三：用PDF.js直接渲染（兼容性最好，完全可控） #

如果想要在所有主流浏览器上都稳定实现翻页功能，最可靠的方式是放弃iframe，直接用PDF.js这个开源库来渲染PDF。它能让你完全控制PDF的渲染和交互逻辑，不仅是翻页，缩放、搜索等功能也能轻松实现。

修改后的代码如下：

HTML部分 #

<div>
    <button id="btnNextPage">Next</button>
</div>
<div id="pdf-container" style="width:100%; height:100%;"></div>

JavaScript部分 #

$(document).ready(function(){
    let pdfDoc = null;
    let currentPage = 1;
    const container = document.getElementById('pdf-container');
    
    // 初始化PDF.js，加载你的PDF文件
    pdfjsLib.getDocument('~/Document/Application.pdf').promise.then(function(pdf){
        pdfDoc = pdf;
        // 渲染第一页
        renderPage(currentPage);
    });
    
    // 渲染指定页码的PDF页面
    function renderPage(pageNum){
        pdfDoc.getPage(pageNum).then(function(page){
            // 设置页面缩放比例，可以根据需求调整
            const viewport = page.getViewport({scale: 1.5});
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            
            // 设置canvas尺寸匹配页面
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            
            // 清空容器并添加当前页面的canvas
            container.innerHTML = '';
            container.appendChild(canvas);
            
            // 将PDF页面渲染到canvas上
            page.render({
                canvasContext: ctx,
                viewport: viewport
            });
        });
    }
    
    // 下一页按钮点击事件
    $("#btnNextPage").click(function(){
        // 检查是否还有下一页
        if(pdfDoc && currentPage < pdfDoc.numPages){
            currentPage++;
            renderPage(currentPage);
        }
    });
});

补充说明 #

你需要先引入PDF.js的脚本，可以用CDN链接，比如在HTML头部添加：

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>

这个方案虽然需要引入额外的库，但胜在兼容性强，而且你能完全掌控PDF的交互逻辑，是生产环境中最推荐的做法。

内容的提问来源于stack exchange，提问作者Harry R