Anpassade teman

Styla visaren så att den matchar din app

Visaren levereras med ett neutralt, Bootstrap‑baserat utseende som serveras från de inbäddade resurserna (viewer.css, samt per‑funktionsstilmallar som searchBar.css och annotationBar.css). Tematisering sker på tre nivåer — välj den grundläggande som räcker för ditt behov.

Nivå 1 — Konfigurera gränssnittet

  • ViewerConfig.ShowThumbs = false — ingen miniatyrpanel.
  • ViewerConfig.FitType = "height" | "width" — hur sidor fyller visningsområdet.
  • ViewerConfig.ShowThumbs = false tillsammans med selektiva CssConfig/ScriptConfig‑paket — behåll bara det gränssnitt som din värd använder.

Nivå 2 — Åsidosätt CSS

Viewer.ReferenceCss() genererar enkla <link>‑taggar; allt du laddar efter dem vinner i kaskaden. Storlek och ram för visaren från din egen stilmall:

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

Värdsidan styr den yttre layouten helt — widgeten renderas inom den ruta du ger #divDocViewer / #div_ctlDoc (det standardbehållarpar som kommer från Quick Start).

Två praktiska regler:

  • Ladda inte Bootstrap två gånger. Om din app redan levererar Bootstrap, hoppa över IncludeBootstrapCss/IncludeBootstrap och låt widgeten ärva din — detta ensam får visaren att se inbyggd ut i din app.
  • Inkludera bara de paket du använder. Varje CssConfig/ScriptConfig‑flagga är valfri; färre paket, färre stilar att hantera.

Nivå 3 — Bygg din egen verktygsrad

För en helt varumärkesanpassad upplevelse, styr widgeten från ditt eget UI — så bygger referensexemplet sin huvudverktygsrad för Viewer. Den verktygsraden är värd‑markup plus en app‑specifik hjälpare; den är inte ett inbäddat SDK‑band. docViewer‑instansen som returneras vid initiering är ditt API‑gränssnitt, tillsammans med dina egna slutpunkter:

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>

Sök och Anmärkning är annorlunda: deras valfria Ribbon‑komponenter är inbäddade i SDK:n (IncludeSearchBar, IncludeAnnotationBar) och genererar sin egen DOM. Du kan använda dem tillsammans med din anpassade Viewer‑verktygsrad eller hoppa över dem och anropa widgetens underliggande API‑er själv. Se den fullständiga Viewer‑paketet i Quick Start för den kompletta integrationsordningen.

Mörkt läge och RTL

Widgeten levereras inte med ett mörkt tema; ett nivå‑2‑överskuggning som riktar sig mot din mörkt‑läge‑klass (t.ex. .dark #divDocViewer { … }) för bakgrunder och ramar täcker de flesta behov, eftersom sidans innehåll själv renderas som bild. För RTL‑värdar fungerar visaren bra i en RTL‑layout — håll din egen verktygsrad RTL‑medveten.

Vad du inte bör göra

Forka eller redigera inte de inbäddade stilmallarna: de levereras i paketet och ersätts vid varje uppdatering. Överskuggningar i din egen stilmall överlever uppgraderingar; ändringar i viewer.css gör de inte.

Var den här sidan hjälpsam?