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

Стилизуйте просмотрщик, чтобы он соответствовал вашему приложению

Просмотрщик поставляется с нейтральным внешним видом на основе 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 — Создание собственной панели инструментов

Для полностью брендированного опыта управляйте виджетом через собственный UI — именно так реальный пример создает основную панель инструментов 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 нет.

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