Vlastní motivy

Styling prohlížeče tak, aby odpovídal vaší aplikaci

Prohlížeč je dodáván s neutrálním vzhledem založeným na Bootstrapu, poskytovaným z vložených zdrojů (viewer.css, plus stylové listy pro jednotlivé funkce jako searchBar.css a annotationBar.css). Tématizace probíhá ve třech úrovních — vyberte nejméně zásadní, která vás dovede k cíli.

Úroveň 1 — Nastavení rozhraní

Mnoho „tématizace“ je ve skutečnosti konfigurace:

  • ViewerConfig.ShowThumbs = false — žádný panel miniatur.
  • ViewerConfig.FitType = "height" | "width" — jak stránky vyplňují okno prohlížeče.
  • ViewerConfig.ShowThumbs = false spolu se selektivními balíčky CssConfig/ScriptConfig — ponechte jen rozhraní, které váš host používá.

Úroveň 2 — Přepsání CSS

Viewer.ReferenceCss() generuje jednoduché <link> tagy; vše, co načtete po nich, vyhrává v kaskádě. Nastavte velikost a rám prohlížeče ve vlastní stylové listě:

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

Hostitelská stránka plně řídí vnější rozvržení — widget se vykresluje uvnitř jakéhokoli kontejneru, který přiřadíte #divDocViewer / #div_ctlDoc (standardní dvojice kontejnerů z rychlého startu).

Dvě praktická pravidla:

  • Nenačítejte Bootstrap dvakrát. Pokud vaše aplikace již Bootstrap obsahuje, vynechejte IncludeBootstrapCss/IncludeBootstrap a nechte widget zdědit ten váš — to samo o sobě způsobí, že prohlížeč vypadá jako součást vaší aplikace.
  • Zahrňte jen balíčky, které používáte. Každý příznak CssConfig/ScriptConfig je volitelný; méně balíčků, méně stylů, se kterými se musíte potýkat.

Úroveň 3 — Vytvořte si vlastní nástrojovou lištu

Pro plně značkový zážitek ovládejte widget z vlastní UI — přesně takto referenční ukázka vytváří hlavní nástrojovou lištu Vieweru. Tato lišta je hostovací markup plus aplikací specifický pomocník; není to vložený SDK Ribbon. Instance docViewer vrácená při inicializaci je vaše API rozhraní, spolu s vašimi vlastními koncovými body:

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>

Vyhledávání a anotace jsou odlišné: jejich volitelné komponenty Ribbon jsou vloženy v SDK (IncludeSearchBar, IncludeAnnotationBar) a generují vlastní DOM. Můžete je použít spolu s vlastní nástrojovou lištou Vieweru nebo je vynechat a volat podkladové API widgetu sami. Viz kompletní balíček Vieweru v Quick Start pro kompletní pořadí integrace.

Tmavý režim a RTL

Widget nedodává tmavý motiv; přepsání na úrovni 2, zaměřené na vaši třídu pro tmavý režim (např. .dark #divDocViewer { … }) pro pozadí a okraje, pokrývá většinu potřeb, protože samotný obsah stránky je vykreslen jako obrázek. Pro RTL hosty widget funguje bez problémů v RTL rozvržení — ujistěte se, že vaše vlastní nástrojová lišta je RTL‑vědomá.

Co nedělat

Neforkujte ani neupravujte vložené stylové listy: jsou součástí balíčku a při každé aktualizaci jsou nahrazeny. Přepsání ve vaší vlastní stylové listě přežije aktualizace; úpravy viewer.css ne.

Byla tato stránka užitečná?