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 jednotlivé soubory stylů jako searchBar.css a annotationBar.css). Tématizace probíhá ve třech úrovních – vyberte nejméně zásadní, která vám vyhovuje.

Úroveň 1 — Konfigurace ohraničení

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 s selektivními balíčky CssConfig/ScriptConfig — ponechte jen to ohraničení, které vaše hostitelská aplikace používá.

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

Viewer.ReferenceCss() generuje jednoduché <link> značky; vše, co načtete po nich, vyhrává v kaskádě. Nastavte velikost a rámeček prohlížeče pomocí vlastního stylového souboru:

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ř libovolného kontejneru, který zadá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, vynechte IncludeBootstrapCss/IncludeBootstrap a nechte widget zdědit ten váš — to samo o sobě způsobí, že prohlížeč vypadá jako součást vaší aplikace.
  • Zahrnujte 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 pomocí vlastního UI — tak přesně vytváří referenční ukázka hlavní nástrojovou lištu prohlížeče. Tato lišta je hostitelský markup plus aplikací specifický pomocník; není to vložený SDK Ribbon. Instance docViewer vrácená inicializací 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 společně s vlastní nástrojovou lištou prohlížeče nebo je vynechat a volat podkladové API widgetu sami. Viz kompletní balíček Vieweru v Quick Startu pro úplné pořadí integrace.

Tmavý režim a RTL

Widget neobsahuje tmavý motiv; přepsání na úrovni 2, které cílí 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 hostitele s RTL layoutem widget funguje bez problémů uvnitř 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é soubory stylů: jsou součástí balíčku a při každé aktualizaci jsou nahrazeny. Přepsání ve vašem vlastním stylovém souboru přežije aktualizace; úpravy viewer.css ne.

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