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

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

Просмотрщик поставляется с нейтральным, основанным на 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
/* Ваша таблица стилей, загруженная после ReferenceCss() */

/* Два контейнера, которыми вы владеете */
#divDocViewer { width: 100%; height: calc(100vh - 48px); }

/* Карточки страницы виджетов */
.docPage { max-width: none; }

Страница‑хост полностью контролирует внешний макет — виджет рендерится внутри любого контейнера, который вы передадите #divDocViewer / #div_ctlDoc (стандартная пара контейнеров из Быстрый старт).

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

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

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

Для полностью брендированного опыта управляйте виджетом из собственного интерфейса — именно так реальный пример создает основную панель инструментов Viewer. Эта панель представляет собой разметку хоста плюс специфичный для приложения вспомогательный элемент; это не встроенная лента SDK. Экземпляр docViewer, возвращаемый при инициализации, является вашей API‑поверхностью, вместе с вашими собственными конечными точками — здесь действие ViewerApi/Open из Как работает Viewer:

html
<div id="toolbar">
    <button id="btnOpen">Open</button>
    <button id="btnPrev">‹</button>
    <button id="btnNext">›</button>
    <!-- ваша система дизайна, ваши иконки -->
</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: () => { /* включите ваши кнопки */ },
        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>

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

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

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

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

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

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