福昕开发者文档中心

viewer 组件 ​

<viewer> 组件用于渲染 PDF。在布局模板中 <viewer> 组件是必需的。以下是一个基础的布局模板示例：

html

<webpdf>
    <viewer></viewer>
</webpdf>

运行示例：

html

<html>
<div id="pdf-ui"></div>
<template id="layout-template">
    <webpdf>
        <viewer></viewer>
    </webpdf>
</template>
</html>
<style>
    html {
        overflow: hidden;
    }

    body {
        height: 4180px;
    }

    #pdf-ui {
        position: relative;
        top: 50px;
    }
</style>
<script>
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function () {
            return document.getElementById('layout-template').innerHTML;
        },
        disableAll: function () {
        }
    });
    var libPath = window.top.location.origin + '/lib';
    var pdfui = new UIExtension.PDFUI({
        viewerOptions: {
            libPath: libPath,
            jr: {
                licenseSN: licenseSN,
                licenseKey: licenseKey
            }
        },
        renderTo: '#pdf-ui',
        appearance: CustomAppearance,
        addons: []
    });

    var origin = window.top.location.origin;
    var url = origin + window.top.location.href.slice(origin.length).replace(/((\/.*)?\/docs\/).*/, '$1FoxitPDFSDKforWeb_DemoGuide.pdf');
    pdfui.openPDFByHttpRangeRequest({
        range: {
            url: url,
        }
    }, {fileName: 'FoxitPDFSDKforWeb_DemoGuide.pdf'})

    window.addEventListener(UIExtension.PDFViewCtrl.DeviceInfo.isDesktop ? 'resize' : 'orientationchange', function (e) {
        pdfui.redraw().catch(function (err) {
            console.log(err)
        });
    });
</script>
json
{
  "iframeOptions": {
    "style": "height: 800px"
  }
}

默认情况下，PDFUI 容器没有大小限制。为了显示滚轮，您需要根据实际 viewer 的大小来设置 PDFUI 的高度。

html

<html>
<div id="pdf-ui"></div>
<template id="layout-template">
    <webpdf>
        <viewer></viewer>
    </webpdf>
</template>
</html>
<style>
    html {
        overflow: hidden;
    }

    body {
        height: 4180px;
    }

    /* PDFUI container style */
    #pdf-ui {
        position: relative;
        top: 50px;
        height: 500px;
    }
</style>
<script>
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function () {
            return document.getElementById('layout-template').innerHTML;
        },
        disableAll: function () {
        }
    });
    var libPath = window.top.location.origin + '/lib';
    var pdfui = new UIExtension.PDFUI({
        viewerOptions: {
            libPath: libPath,
            jr: {
                licenseSN: licenseSN,
                licenseKey: licenseKey
            }
        },
        renderTo: '#pdf-ui',
        appearance: CustomAppearance,
        addons: []
    });

    var origin = window.top.location.origin;
    var url = origin + window.top.location.href.slice(origin.length).replace(/((\/.*)?\/docs\/).*/, '$1FoxitPDFSDKforWeb_DemoGuide.pdf');
    pdfui.openPDFByHttpRangeRequest({
        range: {
            url: url,
        }
    }, {fileName: 'FoxitPDFSDKforWeb_DemoGuide.pdf'})

    window.addEventListener(UIExtension.PDFViewCtrl.DeviceInfo.isDesktop ? 'resize' : 'orientationchange', function (e) {
        pdfui.redraw().catch(function (err) {
            console.log(err)
        });
    });
</script>
json
{
  "iframeOptions": {
    "style": "height: 800px"
  }
}

为了在已渲染的 PDF 页面上实现拖动、缩放和滚动的效果，您需要参阅 <viewer> 组件 中的指令。

使用方式:

<viewer @zoom-on-pinch @zoom-on-doubletap @zoom-on-wheel @touch-to-scroll></viewer>

指令:

指令功能
@zoom-on-pinch两指缩放
@zoom-on-doubletap双击缩放
@zoom-on-wheelCtrl + 鼠标滚轮缩放
@touch-to-scroll通过拖动来进行滚动