# # viewer component

The `<viewer>`component is used to render PDF. It is required in the layout template. Below is a basic layout template example:

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

Runnable example:

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

By default, the PDFUI container has no size limit. In order to display the scroller, you should set the height for PDFUI based on your real viewer size.

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

To achieve drag, zoom and scroll on a rendered PDF page, you should reference directives in your `<viewer> component`.

Usage snippet:

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

Directives:

Directive | Function
--- | ---
`@zoom-on-pinch` | Pinch to zoom
`@zoom-on-doubletap` | Double click to zoom
`@zoom-on-wheel` | Ctrl + mouse wheel to zoom
`@touch-to-scroll` | Drag to scroll