自定义主题

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

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

级别 1 — 配置框架

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

  • ViewerConfig.ShowThumbs = false — 无缩略图面板。
  • ViewerConfig.FitType = "height" | "width" — 页面如何填充视口。
  • ViewerConfig.ShowThumbs = false 与选择性的 CssConfig/ScriptConfig 捆绑一起使用 — 仅保留主机使用的框架。

级别 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 来驱动小部件——这正是参考示例构建其主查看器工具栏的方式。该工具栏由宿主标记加上特定于应用的辅助组件组成；它不是嵌入式 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 { … }）上进行级别 2 的覆盖，针对背景和边框即可满足大多数需求，因为页面内容本身以图像形式渲染。对于 RTL 宿主，查看器可以在 RTL 布局中正常工作——请确保您的工具栏支持 RTL。

不要做的事

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

此页面有帮助吗？