福昕开发者文档中心

布局模板 ​

示例 ​

在 Foxit PDF SDK For Web 中，模板由包含 UIExtension 特定元素、属性和指令的 HTML 编写。UIExtension 将布局模板与来自组件、控制器和指令的信息相结合，以在浏览器中渲染 UI。以下代码段展示了带有 UIExtension 组件和指令的模板。

html

<webpdf>
    <div class="toolbar" style="display:flex;flex-direction:row;padding:6px">
        <print:print-ribbon-button></print:print-ribbon-button>
        <ribbon-button name="freetext-typewriter"
                       @tooltip tooltip-title="toolbar.tooltip.typewriter.title"
                       @controller="states:CreateTypewriterController"
                       icon-class="fv__icon-toolbar-typewriter">toolbar.create.typewriter
        </ribbon-button>
    </div>
    <div class="fv__ui-body">
        <viewer @touch-to-scroll>
        </viewer>
    </div>
    <template name="template-container">
        <print:print-dialog></print:print-dialog>
    </template>
</webpdf>

点击 run 按钮来查看运行结果：

html

<html>
<template id="layout-template-container">
    <webpdf>
        <div name="mytoolbar" class="toolbar" style="display:flex;flex-direction:row;padding:6px">
            <print:print-ribbon-button></print:print-ribbon-button>
            <ribbon-button name="freetext-typewriter" @tooltip tooltip-title="toolbar.tooltip.typewriter.title"
                           @controller="states:CreateTypewriterController" icon-class="fv__icon-toolbar-typewriter">
                toolbar.create.typewriter
            </ribbon-button>
        </div>
        <div class="fv__ui-body">
            <viewer @touch-to-scroll></viewer>
        </div>
        <template name="template-container">
            <print:print-dialog></print:print-dialog>
        </template>
    </webpdf>
</template>
</html>
<script>
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function () {
            return document.getElementById('layout-template-container').innerHTML;
        },
        beforeMounted: function (root) {
            this.toolbarComponent = root.getComponentByName('mytoolbar')
        },
        disableAll: function () {
            this.toolbarComponent.disable();
        },
        enableAll: function () {
            this.toolbarComponent.enable();
        }
    });
    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/print'
        ]
    });
</script>
json
{
  "iframeOptions": {
    "style": "height: 500px"
  }
}

布局模板格式说明 ​

html
<!-- 布局模板必须以 <webpdf> 为根组件 -->
<webpdf>
    <!-- 布局模板支持所有 html 标签和属性 -->
    <div class="toolbar" style="display:flex;flex-direction:row;padding:6px">
        <!-- 冒号前缀是组件模块的名字，组件名字和模快名必须是小写 -->
        <print:print-ribbon-button></print:print-ribbon-button>

        <!-- @开头的参数用于标记指令，@后面跟随的是指令的名称，如果指令注册在非根模快中，则指令名需要以 @module-name:directive-name 的格式编写 -->
        <ribbon-button name="freetext-typewriter" @tooltip tooltip-title="toolbar.tooltip.typewriter.title"
                       @controller="states:CreateTypewriterController" icon-class="fv__icon-toolbar-typewriter">
            toolbar.create.typewriter
        </ribbon-button>
    </div>
    <div class="fv__ui-body">
        <!-- Viewer 是用来显示 PDF 的区域，布局模板中必须有一个 viewer 组件 -->
        <viewer @touch-to-scroll></viewer>
    </div>
    <!-- template 是被重写以后的 html template 标签, 通常用来容纳不需要立即显示的组件，比如对话框、右键菜单以及浮动框等 -->
    <template name="template-container">
        <print:print-dialog></print:print-dialog>
    </template>
</webpdf>

如何指定布局模板和实现设备自适应 ​

请参阅 Appearance 小节。

动态插入布局模板 ​

请点击 run 按钮运行如下的示例：

html

<script>
    var libPath = window.top.location.origin + '/lib';
    var pdfui = new UIExtension.PDFUI({
        viewerOptions: {
            libPath: libPath,
            jr: {
                licenseSN: licenseSN,
                licenseKey: licenseKey
            }
        },
        renderTo: document.body,
        addons: [
            libPath + '/uix-addons/print'
        ]
    });
    pdfui.getComponentByName('home-tab-group-change-color')
            .then(component => {
                // after this component, insert a new group component.
                component.after(`
            <group>
                <xbutton name="alert-btn" class="fv__ui-toolbar-show-text-button">Alert</xbutton>
            </group>
        `, [{
                    target: 'alert-btn',
                    config: {
                        callback: function () {
                            alert('Hello world')
                        }
                    }
                }])
            })
</script>
json
{
  "iframeOptions": {
    "style": "height: 500px"
  }
}

支持插入模板的接口有：

  • Component
    • #after(component|template, fragments)
    • #before(component|template, fragments)
  • ContainerComponent
    • #append(component|template,fragments)
    • #prepend(component|template,fragments)
    • #insert(component|template, index, fragments)

有关这些接口的详细信息，请参考 API Reference: Component 和 ContainerComponent

初始化时插入布局模板 ​

请参阅 UI Fragments 小节。