自定义主题

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

查看器采用中性、基于 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，让小部件继承你的 Bootstrap，这样查看器就会自然融入你的应用界面。
  • 只引入你实际使用的捆绑。 每个 CssConfig/ScriptConfig 标志都是按需开启的；捆绑越少，需要对抗的样式就越少。

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

若要实现完整的品牌化体验，可通过自己的 UI 驱动小部件——这正是参考示例构建主 Viewer 工具栏的方式。该工具栏由宿主标记加上特定于应用的帮助代码组成，并非嵌入式 SDK Ribbon。初始化返回的 docViewer 实例即为你的 API 接口，同时配合你自己的端点使用——下面示例中使用了来自 查看器工作原理 的 ViewerApi/Open 操作：

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('/ViewerApi/Open?fileName=Sample.pdf', { method: 'POST' });
        const token = await resp.text();
        objViewer.View(token);
    });
</script>

搜索和批注的实现方式不同：它们的可选 Ribbon 组件嵌入在 SDK 中（IncludeSearchBar、IncludeAnnotationBar），会生成各自的 DOM。你可以将它们与自定义的 Viewer 工具栏一起使用，也可以完全跳过并自行调用底层小部件的 API。完整的集成顺序请参见 快速入门。

暗色模式和 RTL

小部件本身不提供暗色主题；通过在第 2 级别使用针对暗色模式类的覆盖（例如 .dark #divDocViewer { … }）来处理背景和边框，基本可以满足需求，因为页面内容本身是以图像形式渲染的。对于 RTL（从右到左）宿主，查看器能够在 RTL 布局中正常工作——只需让你的自定义工具栏支持 RTL 即可。

不该做的事

不要 fork 或编辑嵌入的样式表：这些文件随包分发，在每次更新时都会被替换。将覆盖写入自己的样式表可以在升级后仍然生效，而直接修改 viewer.css 则不会保留。

此页面对您有帮助吗？