Benutzerdefinierte Themen

Gestalten Sie den Viewer passend zu Ihrer App

Der Viewer wird mit einem neutralen, Bootstrap‑basierten Look ausgeliefert, der aus den eingebetteten Ressourcen (viewer.css sowie feature‑spezifischen Stylesheets wie searchBar.css und annotationBar.css) bereitgestellt wird. Das Theming erfolgt auf drei Ebenen – wählen Sie die flachste Ebene, die Sie ans Ziel bringt.

Ebene 1 — Konfigurieren Sie die Oberfläche

Viel „Theming“ ist eigentlich nur Konfiguration:

  • ViewerConfig.ShowThumbs = false — kein Miniaturbild‑Panel.
  • ViewerConfig.FitType = "height" | "width" — wie Seiten den Viewport füllen.
  • ViewerConfig.ShowThumbs = false zusammen mit selektiven CssConfig/ScriptConfig‑Bundles — behalten Sie nur die Oberfläche, die Ihr Host verwendet.

Ebene 2 — CSS überschreiben

Viewer.ReferenceCss() gibt einfache <link>‑Tags aus; alles, was Sie nach ihnen laden, gewinnt die Kaskade. Größe und Rahmen des Viewers aus Ihrem eigenen Stylesheet festlegen:

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; }

Die Host‑Seite steuert das äußere Layout vollständig – das Widget rendert innerhalb des beliebigen Containers, den Sie #divDocViewer / #div_ctlDoc zuweisen (das Standard‑Container‑Paar aus dem Quick‑Start).

Zwei praktische Regeln:

  • Laden Sie Bootstrap nicht doppelt. Wenn Ihre App bereits Bootstrap mitliefert, überspringen Sie IncludeBootstrapCss/IncludeBootstrap und lassen Sie das Widget Ihr Bootstrap erben – das allein lässt den Viewer nativer in Ihrer App wirken.
  • Binden Sie nur die Bundles ein, die Sie verwenden. Jede CssConfig/ScriptConfig‑Option ist optional; weniger Bundles, weniger Styles, mit denen Sie kämpfen müssen.

Ebene 3 — Erstellen Sie Ihre eigene Symbolleiste

Für ein vollständig gebrandetes Erlebnis steuern Sie das Widget über Ihre eigene UI – genau so erstellt das Referenzbeispiel seine Haupt‑Viewer‑Symbolleiste. Diese Symbolleiste besteht aus Host‑Markup plus einem app‑spezifischen Helfer; sie ist kein eingebettetes SDK‑Ribbon. Die bei der Initialisierung zurückgegebene docViewer‑Instanz ist Ihre API‑Oberfläche, zusammen mit Ihren eigenen Endpunkten:

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>

Suche und Annotation sind anders: Ihre optionalen Ribbon‑Komponenten sind im SDK eingebettet (IncludeSearchBar, IncludeAnnotationBar) und erzeugen ihr eigenes DOM. Sie können sie zusammen mit Ihrer benutzerdefinierten Viewer‑Symbolleiste verwenden oder sie überspringen und die zugrunde liegenden Widget‑APIs selbst aufrufen. Siehe die vollständige Viewer‑Package im Quick‑Start für die vollständige Integrationsreihenfolge.

Dunkelmodus und RTL

Das Widget liefert kein dunkles Theme; ein Override auf Ebene 2, das Ihre Dark‑Mode‑Klasse anspricht (z. B. .dark #divDocViewer { … }) für Hintergründe und Rahmen, deckt die meisten Anforderungen ab, da der Seiteninhalt selbst als Bild gerendert wird. Für RTL‑Hosts funktioniert der Viewer problemlos innerhalb eines RTL‑Layouts – achten Sie darauf, dass Ihre eigene Symbolleiste RTL‑aware ist.

Was Sie nicht tun sollten

Verzweigen oder bearbeiten Sie die eingebetteten Stylesheets nicht: Sie werden im Paket ausgeliefert und bei jedem Update ersetzt. Overrides in Ihrem eigenen Stylesheet überleben Upgrades; Änderungen an viewer.css nicht.

War diese Seite hilfreich?