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

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();
    }
});