福昕开发者文档中心

I18n 组件用法及使用指南 ​

自定义资源 ​

请参阅该 页面.

用法 ​

<text> 组件 ​

<text> 是一个用于显示文本的组件。它支持 i18n 条目。在 DOM 树上，它不会创建新的 HTMLElement，而是创建文本节点并将其插入 DOM 树。字体样式需要包含在其他标签之外，并且通过 CSS 进行设置。

html

<html>
<template id="layout-template">
    <webpdf>
        <div>
                <span class="span-with-text-component">
                    <!-- The text "inline text" will be displayed -->
                    <text>inline text</text>
                </span>
            <span class="span-with-text-component">
                    <!-- The text "Home" will be displayed -->
                    <text>toolbar.tabs.home.title</text>
                </span>
        </div>
        <div class="fv__ui-body">
            <viewer></viewer>
        </div>
    </webpdf>
</template>
</html>
<style>
    .span-with-text-component {
        color: red;
        font-size: 18px;
        font-style: bold;
    }
</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: document.body,
        appearance: CustomAppearance,
        addons: []
    });
</script>

data-i18n 属性 ​

data-i18n 属性是显示 HTML 元素中文本的另一种方式，与 <text> 组件不同，data-i18n 将覆盖所有子节点并替换为文本节点。

html

<html>
<template id="layout-template">
    <webpdf>
        <div>
            <!-- The text "inline text" will be displayed -->
            <span class="span-with-text-component" data-i18n="inline text"> </span>
            <!-- The text "Home" will be displayed -->
            <span class="span-with-text-component" data-i18n="toolbar.tabs.home.title"> </span>
        </div>
        <div class="fv__ui-body">
            <viewer></viewer>
        </div>
    </webpdf>
</template>
</html>
<style>
    .span-with-text-component {
        color: red;
        font-size: 18px;
        font-style: bold;
        padding: 0 1em;
    }
</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: document.body,
        appearance: CustomAppearance,
        addons: []
    });
</script>

支持的组件 ​

html

<html>
<template id="layout-template">
    <webpdf>
        <div>
            <div>
                <!-- tab component example -->
                <gtab group="example-tab" body="tab-body-1">toolbar.tabs.home.title</gtab>
                <gtab group="example-tab" body="tab-body-2">toolbar.tabs.edit.title</gtab>
                <gtab group="example-tab" body="tab-body-3">toolbar.tabs.comment.title</gtab>
            </div>
            <div>
                <div name="tab-body-1" class="button-group">
                    <!-- The text "OK" will be displayed -->
                    <xbutton>dialog.ok</xbutton>
                    <xbutton text="dialog.ok"></xbutton>
                    <file-selector>dialog.ok</file-selector>
                    <file-selector text="dialog.ok"></file-selector>
                    <dropdown text="dialog.ok"></dropdown>
                </div>
                <div name="tab-body-2"></div>
                <div name="tab-body-3"></div>
            </div>
        </div>
        <div class="fv__ui-body">
            <viewer></viewer>
        </div>
    </webpdf>
</template>
</html>
<style>
    .span-with-text-component {
        color: red;
        font-size: 18px;
        font-style: bold;
        padding: 0 1em;
    }

    .button-group {
        display: flex;
    }

    .button-group .fv__ui-button-text {
        width: 3em;
        text-align: center;
    }
</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: document.body,
        appearance: CustomAppearance,
        addons: []
    });
</script>

通过 API 切换当前语言 ​

html

<html></html>
<style>
    .span-with-text-component {
        color: red;
        font-size: 18px;
        font-style: bold;
        padding: 0 1em;
    }
</style>
<script>
    UIExtension.PDFUI.module('custom', [])
            .controller('SwitchLanguageController', {
                mounted: function () {
                    this.updateButtonText();
                },
                updateButtonText: function () {
                    const pdfui = this.getPDFUI();
                    switch (pdfui.currentLanguage || navigator.language) {
                        case 'en':
                        case 'en-US':
                            this.component.setText('Swith to Chinese');
                            break;
                        case 'zh':
                        case 'zh-CN':
                            this.component.setText('切换为英文');
                            break;
                    }
                },
                handle: function () {
                    const pdfui = this.getPDFUI();
                    switch (pdfui.currentLanguage) {
                        case 'en':
                        case 'en-US':
                            pdfui.changeLanguage('zh-CN').then(() => {
                                this.updateButtonText();
                            });
                            break;
                        case 'zh':
                        case 'zh-CN':
                            pdfui.changeLanguage('en-US').then(() => {
                                this.updateButtonText();
                            });
                            break;
                    }
                }
            });
    var CustomAppearance = UIExtension.appearances.AdaptiveAppearance.extend({
        getDefaultFragments: function () {
            return [{
                target: 'home-tab-group-hand',
                action: 'append',
                template: '<xbutton class="fv__ui-toolbar-show-text-button" @controller="custom:SwitchLanguageController"></xbutton>'
            }];
        }
    });
    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: []
    });
</script>