# # viewer 组件

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

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

运行示例：

    <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>

    {
        "iframeOptions": {
            "style": "height: 800px"
        }
    }

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

    <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>

    {
        "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-wheel` | Ctrl + 鼠标滚轮缩放
`@touch-to-scroll` | 通过拖动来进行滚动