Skip to content

@require-modules

@require-modules 指令用于确定一个 模块 是否存在,如果不存在,这个指令标记的组件将不会被解析,并且会被忽略。

代码示例

当你运行下面示例时,您不会看到任何按钮,因为没有加载 file-Property addon。

html

<html>
<template id="layout-template">
    <webpdf>
        <group-list>
            <!-- 'fpmodule' is a module defined in the 'file-property' addon which is not declared in the `addons:[]`, this group component will not be rendered  -->
            <group name="file-property" @require-modules="fpmodule">
                <fpmodule:file-property-button></fpmodule:file-property-button>
            </group>
        </group-list>
        <div class="fv__ui-body">
            <viewer></viewer>
        </div>
        <template>
            <fpmodule:file-property-dialog></fpmodule:file-property-dialog>
        </template>
    </webpdf>
</template>
</html>
<script>
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function () {
            return document.getElementById('layout-template').innerHTML;
        }
    });
    var libPath = window.top.location.origin + '/lib';
    var pdfui = new UIExtension.PDFUI({
        viewerOptions: {
            libPath: libPath,
            jr: {
                licenseSN: licenseSN,
                licenseKey: licenseKey
            }
        },
        renderTo: document.body,
        appearance: CustomAppearance,
        addons: [] // No addon is loaded
    });
    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: 500px"
  }
}

当运行以下示例时,您将看到 File Property,因为加载了 File Property addon。

html

<html>
<template id="layout-template">
    <webpdf>
        <group-list>
            <group name="file-property" @require-modules="fpmodule">
                <fpmodule:file-property-button></fpmodule:file-property-button>
            </group>
        </group-list>
        <div class="fv__ui-body">
            <viewer></viewer>
        </div>
        <template>
            <fpmodule:file-property-dialog></fpmodule:file-property-dialog>
        </template>
    </webpdf>
</template>
</html>
<script>
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function () {
            return document.getElementById('layout-template').innerHTML;
        }
    });
    var libPath = window.top.location.origin + '/lib';
    var pdfui = new UIExtension.PDFUI({
        viewerOptions: {
            libPath: libPath,
            jr: {
                licenseSN: licenseSN,
                licenseKey: licenseKey
            }
        },
        renderTo: document.body,
        appearance: CustomAppearance,
        addons: [
            libPath + '/uix-addons/file-property'
        ] // the `file-property` addon will be loaded
    });
    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: 500px"
  }
}