Thèmes personnalisés

Stylez le visualiseur pour qu'il corresponde à votre application

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

Niveau 1 — Configurer le chrome

Une grande partie du « theming » 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 le chrome utilisé par votre hôte.

Niveau 2 — Remplacer le CSS

Viewer.ReferenceCss() émet des balises <link> simples ; tout ce que vous chargez après elles l'emporte dans la cascade. Dimensionnez et encadrez le visualiseur depuis 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 Démarrage rapide).

Deux règles pratiques :

  • Ne chargez pas Bootstrap deux fois. Si votre application fournit 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 opt‑in ; 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 visualiseur. 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 — ici l'action ViewerApi/Open provenant de Comment le visualiseur fonctionne :

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>

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 conjointement avec votre barre d'outils personnalisée du visualiseur ou les ignorer et appeler vous‑même les API sous‑jacentes du widget. Consultez le Démarrage rapide pour l'ordre complet d'intégration.

Mode sombre et RTL

Le widget ne fournit pas de thème sombre ; un remplacement 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 consciente du 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 dans le paquet et sont remplacées à chaque mise à jour. Les remplacements dans votre propre feuille de style survivent aux mises à niveau ; les modifications de viewer.css ne le font pas.

Cette page était-elle utile ?