Thèmes personnalisés

Stylez le visualiseur pour qu'il corresponde à votre application

Le visualiseur est fourni avec un aspect neutre basé sur Bootstrap, servi à partir des ressources intégrées (viewer.css, ainsi que des feuilles de style spécifiques aux fonctionnalités comme searchBar.css et annotationBar.css). La thématisation se fait à trois niveaux — choisissez le plus superficiel qui vous convient.

Niveau 1 — Configurer la chrome

Beaucoup de « thématisation » est en réalité de la configuration :

  • ViewerConfig.ShowThumbs = false — aucun panneau de vignettes.
  • ViewerConfig.FitType = "height" | "width" — comment les pages remplissent la fenêtre d'affichage.
  • ViewerConfig.ShowThumbs = false combiné avec des bundles sélectifs CssConfig/ScriptConfig — ne conservez que la chrome utilisée par votre hôte.

Niveau 2 — Surcharger le CSS

Viewer.ReferenceCss() génère des balises <link> simples ; tout ce que vous chargez après elles l'emporte dans la cascade. Dimensionnez et encadrez le visualiseur avec votre propre feuille de style :

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

La page hôte contrôle entièrement la mise en page extérieure — le widget s'affiche à l'intérieur de la boîte que vous fournissez à #divDocViewer / #div_ctlDoc (la paire de conteneurs standard du Quick Start).

Deux règles pratiques :

  • Ne chargez pas Bootstrap deux fois. Si votre application inclut déjà Bootstrap, ignorez IncludeBootstrapCss/IncludeBootstrap et laissez le widget hériter du vôtre — cela suffit à rendre le visualiseur natif à votre application.
  • Incluez uniquement les bundles que vous utilisez. Chaque drapeau CssConfig/ScriptConfig est optionnel ; moins de bundles, moins de styles à gérer.

Niveau 3 — Créez votre propre barre d'outils

Pour une expérience entièrement personnalisée, pilotez le widget depuis votre propre interface — c'est exactement ainsi que l'exemple de référence construit sa barre d'outils principale du Viewer. Cette barre d'outils est du balisage hôte plus un assistant spécifique à l'application ; ce n'est pas un ruban SDK intégré. L'instance docViewer renvoyée lors de l'initialisation constitue votre surface d'API, ainsi que vos propres points de terminaison :

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>

La recherche et l'annotation sont différentes : leurs composants ruban optionnels sont intégrés dans le SDK (IncludeSearchBar, IncludeAnnotationBar) et génèrent leur propre DOM. Vous pouvez les utiliser avec votre barre d'outils Viewer personnalisée ou les ignorer et appeler vous‑même les API du widget sous‑jacent. Consultez le package complet du Viewer dans le Quick Start pour l'ordre complet d'intégration.

Mode sombre et RTL

Le widget ne fournit pas de thème sombre ; une surcharge de Niveau 2 ciblant votre classe de mode sombre (par ex. .dark #divDocViewer { … }) sur les arrière‑plans et bordures couvre la plupart des besoins, puisque le contenu de la page est rendu sous forme d'images. Pour les hôtes RTL, le visualiseur fonctionne parfaitement dans une mise en page RTL — assurez‑vous que votre propre barre d'outils soit compatible RTL.

Ce qu'il ne faut pas faire

Ne créez pas de fork ni n'éditez les feuilles de style intégrées : elles sont livrées avec le package et sont remplacées à chaque mise à jour. Les surcharges dans votre propre feuille de style survivent aux mises à niveau ; les modifications de viewer.css ne le font pas.

Cette page était-elle utile ?