Пользовательские темы

Оформите просмотрщик в соответствии с вашим приложением

Просмотрщик поставляется с нейтральным внешним видом на основе 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 (стандартная пара контейнеров из Quick Start).

Два практических правила:

  • Не загружайте Bootstrap дважды. Если ваше приложение уже поставляется с Bootstrap, пропустите IncludeBootstrapCss/IncludeBootstrap и позвольте виджету наследовать ваш — этого достаточно, чтобы просмотрщик выглядел как часть вашего приложения.
  • Подключайте только те пакеты, которые используете. Каждый флаг CssConfig/ScriptConfig включается по желанию; меньше пакетов — меньше стилей, с которыми нужно бороться.

Уровень 3 — Создание собственной панели инструментов

Для полностью брендированного опыта управляйте виджетом через собственный интерфейс — именно так реальный пример создает основную панель инструментов Viewer. Эта панель представляет собой разметку хоста плюс специфичный для приложения помощник; это не встроенная лента SDK. Экземпляр 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>

Поиск и аннотации отличаются: их необязательные компоненты ленты встроены в SDK (IncludeSearchBar, IncludeAnnotationBar) и генерируют собственный DOM. Вы можете использовать их вместе с вашей пользовательской панелью Viewer или пропустить их и вызывать базовые API виджета самостоятельно. См. полный пакет Viewer в Quick Start для полного порядка интеграции.

Тёмный режим и RTL

Виджет не поставляется с тёмной темой; переопределение уровня 2, нацеленное на ваш класс тёмного режима (например, .dark #divDocViewer { … }) для фонов и границ покрывает большинство потребностей, поскольку содержимое страницы отображается как изображения. Для хостов RTL просмотрщик без проблем работает внутри RTL‑макета — сделайте вашу панель инструментов поддерживающей RTL.

Что не следует делать

Не форкайте и не редактируйте встроенные таблицы стилей: они поставляются в пакете и заменяются при каждом обновлении. Переопределения в вашей собственной таблице стилей сохраняются после обновлений; изменения в viewer.css нет.

Была ли эта страница полезной?