如何通过鼠标滚轮控制PDF页面的放大与缩小？

福昕PDF SDK 软件开发工具包 > 福昕PDF SDK(Web)

标签:

如何通过鼠标滚轮控制PDF页面的放大与缩小？

福昕知识库
2024-12-09

WebSDK中鼠标滚轮操作的缺省响应逻辑如下：

鼠标滚轮，向上 / 下翻看PDF页面内容
Ctrl+鼠标滚轮，对当前PDF视图进行页面缩放，默认的缩放步进值为10%左右

针对图纸等类型的PDF文件：

如果希望通过鼠标滚轮直接控制PDF页面的缩放效果，则需要先获取到鼠标滚轮事件，然后调用preventDefault()接口阻止原有的鼠标滚轮响应 —— 向上/下翻看PDF页面内容
如果希望禁用Ctrl + 鼠标滚轮对PDF页面的缩放效果，可以参考开发者手册中”组件”-“基础组件”中”viewer组件”章节的内容，移除掉viewer组件上的”@zoom-on-wheel”指令即可。

示例代码如下：

pdfui.addViewerEventListener(Events.openFileSuccess, async function (pdfdoc) {
    loadingComponentPromise.then(function (component) {
        component.close();
    });

    //PDF打开成功后才会出现侧边栏的滚动条，才可以获取到PDF预览区域的DOM元素，在该元素上添加鼠标滚轮事件监听器，监听滚轮的动作，设置对应的缩放比例
    const zoomableContent = document.getElementsByClassName('fv__pdf-viewer');
    zoomableContent[0].addEventListener('wheel', async function (event) {
        //阻止原有的鼠标滚轮响应：翻页
        event.preventDefault();

        //获取当前视图的缩放比例
        var docRender = await pdfui.getPDFDocRender();
        //docRender.getScale();
        var zoomValue = await docRender.getScaleRatio();
        console.log("当前缩放比例：", zoomValue);

        const delta = event.deltaY;
        if (delta < 0) {
            // 鼠标滚轮向上滚动，放大
            zoomValue += 0.05;
        } else {
            // 鼠标滚轮向下滚动，缩小
            zoomValue -= 0.05;
        }
        pdfui.zoomTo(zoomValue);
    });
    //视图模式中的“单页视图” 和 “对开视图”是SDK封装好的内置组件，在该视图模式下，SDK也会监听滚轮事件，并同时做出翻页的响应。如果希望通过鼠标滚轮直接控制页面缩放，则需要将这两个视图模式禁用，以免影响交互体验。
    if (pdfdoc.getPageCount() > 1) {
        var singlePageBTN = await pdfui.getComponentByName('single-page');
        singlePageBTN.doDisable();
        var facingPageBTN = await pdfui.getComponentByName('facing-page')
        facingPageBTN.doDisable();
    }
});