Benutzerdefinierte Themen

Gestalten Sie den Viewer passend zu Ihrer App

Der Viewer wird mit einem neutralen, Bootstrap‑basierten Look geliefert, 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 – Chrome konfigurieren

  • ViewerConfig.ShowThumbs = false — kein Miniaturbild‑Panel.
  • ViewerConfig.FitType = "height" | "width" — wie Seiten den Viewport ausfüllen.
  • ViewerConfig.ShowThumbs = false zusammen mit selektiven CssConfig/ScriptConfig‑Bündeln — behalten Sie nur das Chrome, das Ihr Host verwendet.

Ebene 2 – CSS überschreiben

Viewer.ReferenceCss() erzeugt einfache <link>‑Tags; 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 von Ihnen bereitgestellten Containers #divDocViewer / #div_ctlDoc (das Standard‑Container‑Paar aus dem Quick‑Start).

Zwei praktische Regeln:

  • Laden Sie Bootstrap nicht doppelt. Wenn Ihre App bereits Bootstrap bereitstellt, überspringen Sie IncludeBootstrapCss/IncludeBootstrap und lassen Sie das Widget Ihres übernehmen – das allein lässt den Viewer nativ in Ihrer App aussehen.
  • Binden Sie nur die Bündel ein, die Sie verwenden. Jede CssConfig/ScriptConfig‑Option ist optional; weniger Bündel, weniger Styles, mit denen Sie kämpfen müssen.

Ebene 3 – Eigene Symbolleiste erstellen

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 durch die Initialisierung zurückgegebene docViewer‑Instanz ist Ihre API‑Oberfläche, zusammen mit Ihren eigenen Endpunkten – hier die ViewerApi/Open‑Aktion aus Wie der Viewer funktioniert:

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>

Suche und Annotation sind unterschiedlich: 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 den Schnellstart für die vollständige Integrationsreihenfolge.

Dunkelmodus und RTL

Das Widget liefert kein dunkles Theme; eine Ebene‑2‑Überschreibung, die Ihre Dark‑Mode‑Klasse (z. B. .dark #divDocViewer { … }) für Hintergründe und Rahmen anspricht, 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

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

War diese Seite hilfreich?