自定义主题

将查看器样式匹配您的应用

查看器采用中性、基于 Bootstrap 的外观，来自嵌入资源（viewer.css，以及如 searchBar.css、annotationBar.css 等特性样式表）。主题化分为三个层级——选择最浅的层级即可实现需求。

级别 1 — 配置界面

大量的“主题化”实际上是配置：

  • ViewerConfig.ShowThumbs = false — 无缩略图面板。
  • ViewerConfig.FitType = "height" | "width" — 页面如何填充视口。
  • ViewerConfig.ShowThumbs = false together with selective CssConfig/ScriptConfig bundles — 只保留主机使用的界面。

级别 2 — 覆盖 CSS

Viewer.ReferenceCss() 会输出普通的 <link> 标签；在它们之后加载的任何内容都会在层叠中获胜。使用您自己的样式表来设置查看器的尺寸和框架：

css
/* Your stylesheet, loaded after ReferenceCss() */

/* The two containers you own */
#divDocViewer { width: 100%; height: calc(100vh - 48px); }

/* Widget page cards */
.docPage { max-width: none; }

宿主页面完全控制外部布局——小部件会渲染在您提供的 #divDocViewer / #div_ctlDoc（快速入门中的标准容器对）内部的任意盒子中。

两个实用规则：

  • 不要双重加载 Bootstrap。 如果您的应用已经包含 Bootstrap，请跳过 IncludeBootstrapCss/IncludeBootstrap，让小部件继承您的版本——仅此就能使查看器看起来原生于您的应用。
  • 仅包含您使用的捆绑。 每个 CssConfig/ScriptConfig 标志都是可选的；捆绑越少，需要对抗的样式越少。

级别 3 — 构建您自己的工具栏

要实现完整的品牌化体验，可从您自己的 UI 驱动小部件——这正是参考示例构建其主 Viewer 工具栏的方式。该工具栏是宿主标记加上应用特定的帮助器；它不是嵌入的 SDK Ribbon。初始化后返回的 docViewer 实例即为您的 API 接口，同时还有您自己的端点：

html
<div id="toolbar">
    <button id="btnOpen">Open</button>
    <button id="btnPrev">‹</button>
    <button id="btnNext">›</button>
    <!-- your design system, your icons -->
</div>
<div id="divDocViewer"><div id="div_ctlDoc"></div></div>

<script>
    const objViewer = $('#div_ctlDoc').docViewer({
        showThumbs: true,
        autoLoad:   false,
        BasePath:   '/',
        ResPath:    'doconut-res/images',
        onViewerReady: () => { /* enable your buttons */ },
        onError: (msg) => console.error('DocViewer:', msg)
    });

    document.getElementById('btnOpen').addEventListener('click', async () => {
        const resp  = await fetch('/api/open?fileName=Sample.pdf', { method: 'POST' });
        const token = await resp.text();
        objViewer.View(token);
    });
</script>

搜索和注释有所不同：它们的可选 Ribbon 组件嵌入在 SDK 中（IncludeSearchBar、IncludeAnnotationBar），并生成各自的 DOM。您可以将它们与自定义的 Viewer 工具栏一起使用，或跳过它们并自行调用底层小部件 API。请参阅完整的 Viewer 包在快速入门中以获取完整的集成顺序。

暗模式和 RTL

小部件不提供暗色主题；在背景和边框上针对您的暗模式类（例如 .dark #divDocViewer { … }）的 Level 2 覆盖可以满足大多数需求，因为页面内容本身是以图像形式渲染的。对于 RTL 主机，查看器可以在 RTL 布局中正常工作——请确保您自己的工具栏支持 RTL。

不要做的事

不要 fork 或编辑嵌入的样式表：它们随包一起提供，并在每次更新时被替换。您在自己的样式表中的覆盖会在升级后保留；对 viewer.css 的编辑则不会。

此页面有帮助吗？