# # 缩略图加载错误

## # 在加载 "缩略图" addon之前，此组件不可用

随着版本 7.3.0 的发布，缩略图组件被模块化为 addon。因此，在将过去的版本迁移到此版本或更高版本之前，应根据实际需要配置缩略图组件。在初始化阶段，如果没有对缩略图组件进行适当修改，则直接迁移将导致浏览器控制台上出现错误。要查看错误的详细信息，请打开浏览器 DevTools，然后单击以下 demo 的右上侧的 `Run`。

注意：以下 demo 不在旧版浏览器上运行。

    <html>
        <template id="layout-template">
            <webpdf>
                <toolbar name="toolbar">
                    <div style="display: flex; flex-direction: row; padding: 6px;">
                        <open-file-dropdown></open-file-dropdown>
                        <download-file-button></download-file-button>
                    </div>
                </toolbar>
                <div class="fv__ui-body">
                    <sidebar>
                        <commentlist-sidebar-panel></commentlist-sidebar-panel>
                        <thumbnail-sidebar-panel></thumbnail-sidebar-panel>
                    </sidebar>
                    <viewer @zoom-on-pinch @zoom-on-doubletap @zoom-on-wheel @touch-to-scroll></viewer>
                </div>
                <template name="template-container">
                    <fpmodule:file-property-dialog></fpmodule:file-property-dialog>
                    <!-- contextmenus
                    <page-contextmenu></page-contextmenu>
                    <default-annot-contextmenu></default-annot-contextmenu>
                    <markup-contextmenu></markup-contextmenu>
                    -->
                </template>
            </webpdf>
        </template>

        <script>
            var CustomAppearance = PDFViewCtrl.shared.createClass({
                getLayoutTemplate: function() {
                    var template = document.getElementById('layout-template');
                    return template.innerHTML;
                },
                beforeMounted: function(rootComponent) {
                    this.rootComponent = rootComponent;
                    this.toolbarComponent = rootComponent.getComponentByName('toolbar');
                },
                disableAll: function() {
                    this.toolbarComponent.disable();
                },
                enableAll: function() {
                    this.toolbarComponent.enable();
                }
            }, UIExtension.appearances.Appearance);
            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',
                ]
            });
        </script>
    </html>

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

## # 解决方案

### # 引用缩略图 addon

如果您需要缩略图功能，则需要在初始化 PDFUI 时引用 `/uix-addons/thumbnail`。以下是示例代码：

    <html>
        <template id="layout-template">
            <webpdf>
                <toolbar name="toolbar">
                    <div style="display: flex; flex-direction: row; padding: 6px;">
                        <open-file-dropdown></open-file-dropdown>
                        <download-file-button></download-file-button>
                    </div>
                </toolbar>
                <div class="fv__ui-body">
                    <sidebar>
                        <commentlist-sidebar-panel></commentlist-sidebar-panel>
                        <thumbnail-sidebar-panel></thumbnail-sidebar-panel>
                    </sidebar>
                    <viewer @zoom-on-pinch @zoom-on-doubletap @zoom-on-wheel @touch-to-scroll></viewer>
                </div>
                <template name="template-container">
                    <fpmodule:file-property-dialog></fpmodule:file-property-dialog>
                    <!-- contextmenus -->
                    <page-contextmenu></page-contextmenu>
                    <default-annot-contextmenu></default-annot-contextmenu>
                    <markup-contextmenu></markup-contextmenu>
                </template>
            </webpdf>
        </template>
        <script>
            var CustomAppearance = PDFViewCtrl.shared.createClass({
                getLayoutTemplate: function() {
                    var template = document.getElementById('layout-template');
                    return template.innerHTML;
                },
                beforeMounted: function(rootComponent) {
                    this.rootComponent = rootComponent;
                    this.toolbarComponent = rootComponent.getComponentByName('toolbar');
                },
                disableAll: function() {
                    this.toolbarComponent.disable();
                },
                enableAll: function() {
                    this.toolbarComponent.enable();
                }
            }, UIExtension.appearances.Appearance);
            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',
                    libPath + '/uix-addons/thumbnail'
                ]
            });
        </script>
    </html>

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

### # 在 `layout-template` 中删除 `<thumbnail-sidebar-panel>` 标签

如果您不需要缩略图功能，则需要删除 `<thumbnail-sidebar-panel>` 标签以避免错误。以下是示例代码：

    <html>
        <template id="layout-template">
            <webpdf>
                <toolbar name="toolbar">
                    <div style="display: flex; flex-direction: row; padding: 6px;">
                        <open-file-dropdown></open-file-dropdown>
                        <download-file-button></download-file-button>
                    </div>
                </toolbar>
                <div class="fv__ui-body">
                    <sidebar>
                        <commentlist-sidebar-panel></commentlist-sidebar-panel>
                        <!-- <thumbnail-sidebar-panel></thumbnail-sidebar-panel> -->
                    </sidebar>
                    <viewer @zoom-on-pinch @zoom-on-doubletap @zoom-on-wheel @touch-to-scroll></viewer>
                </div>
                <template name="template-container">
                    <fpmodule:file-property-dialog></fpmodule:file-property-dialog>
                    <!-- contextmenus -->
                    <page-contextmenu></page-contextmenu>
                    <default-annot-contextmenu></default-annot-contextmenu>
                    <markup-contextmenu></markup-contextmenu>
                </template>
            </webpdf>
        </template>

        <script>
            var CustomAppearance = PDFViewCtrl.shared.createClass({
                getLayoutTemplate: function() {
                    var template = document.getElementById('layout-template');
                    return template.innerHTML;
                },
                beforeMounted: function(rootComponent) {
                    this.rootComponent = rootComponent;
                    this.toolbarComponent = rootComponent.getComponentByName('toolbar');
                },
                disableAll: function() {
                    this.toolbarComponent.disable();
                },
                enableAll: function() {
                    this.toolbarComponent.enable();
                }
            }, UIExtension.appearances.Appearance);
            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',
                ]
            });
        </script>
    </html>

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