Προσαρμοσμένα Θέματα

Στυλιζάρετε τον προβολέα ώστε να ταιριάζει με την εφαρμογή σας

Ο προβολέας έρχεται με μια ουδέτερη εμφάνιση βασισμένη στο Bootstrap, που παρέχεται από τους ενσωματωμένους πόρους (viewer.css, καθώς και φύλλα στυλ ανά λειτουργία όπως searchBar.css και annotationBar.css). Η θεματοποίηση γίνεται σε τρία επίπεδα — επιλέξτε το πιο ρηχό που σας οδηγεί στο επιθυμητό.

Επίπεδο 1 — Διαμορφώστε το περιβάλλον

Πολλά από τα «θέματα» είναι στην πραγματικότητα διαμόρφωση:

  • ViewerConfig.ShowThumbs = false — χωρίς πίνακα μικρογραφιών.
  • ViewerConfig.FitType = "height" | "width" — πώς οι σελίδες γεμίζουν το παράθυρο προβολής.
  • ViewerConfig.ShowThumbs = false μαζί με επιλεκτικά πακέτα CssConfig/ScriptConfig — διατηρήστε μόνο το περιβάλλον που χρησιμοποιεί ο κεντρικός σας κώδικας.

Επίπεδο 2 — Παράκαμψη του CSS

Viewer.ReferenceCss() εκδίδει απλές ετικέτες <link>· οτιδήποτε φορτώνετε μετά από αυτές κερδίζει την αλυσίδα. Ορίστε το μέγεθος και το πλαίσιο του προβολέα από το δικό σας φύλλο στυλ:

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

Η σελίδα-φιλοξενία ελέγχει πλήρως τη εξωτερική διάταξη — το widget αποδίδεται μέσα σε οποιοδήποτε κουτί δώσετε στο #divDocViewer / #div_ctlDoc (το τυπικό ζεύγος containers από το Quick Start).

Δύο πρακτικοί κανόνες:

  • Μην φορτώνετε δύο φορές το Bootstrap. Αν η εφαρμογή σας ήδη περιλαμβάνει Bootstrap, παραλείψτε τα IncludeBootstrapCss/IncludeBootstrap και αφήστε το widget να κληρονομήσει το δικό σας — αυτό μόνο κάνει τον προβολέα να φαίνεται εγγενής στην εφαρμογή σας.
  • Συμπεριλάβετε μόνο τα πακέτα που χρησιμοποιείτε. Κάθε σημαία CssConfig/ScriptConfig είναι επιλογή· λιγότερα πακέτα, λιγότερα στυλ να διαχειριστείτε.

Επίπεδο 3 — Δημιουργήστε τη δική σας γραμμή εργαλείων

Για μια πλήρως επωνυμοποιημένη εμπειρία, ελέγξτε το widget από το δικό σας UI — αυτό είναι ακριβώς ο τρόπος με τον οποίο το δείγμα αναφοράς δημιουργεί τη βασική γραμμή εργαλείων του Viewer. Η γραμμή εργαλείων αυτή είναι markup του κεντρικού κώδικα συν ένα βοηθητικό στοιχείο ειδικό για την εφαρμογή· δεν είναι ενσωματωμένο SDK Ribbon. Η παρουσία docViewer που επιστρέφεται κατά την αρχικοποίηση είναι η διεπαφή API σας, μαζί με τα δικά σας endpoints:

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>

Η Αναζήτηση και η Σχόλιο είναι διαφορετικές: τα προαιρετικά στοιχεία Ribbon τους είναι ενσωματωμένα στο SDK (IncludeSearchBar, IncludeAnnotationBar) και δημιουργούν το δικό τους DOM. Μπορείτε να τα χρησιμοποιήσετε μαζί με τη δική σας προσαρμοσμένη γραμμή εργαλείων Viewer ή να τα παραλείψετε και να καλέσετε μόνοι σας τα υποκείμενα APIs του widget. Δείτε το πλήρες πακέτο Viewer στο Quick Start για τη σειρά ολοκληρωμένης ενσωμάτωσης.

Σκοτεινή λειτουργία και RTL

Το widget δεν παρέχει σκοτεινό θέμα· μια παράκαμψη Επίπεδου 2 που στοχεύει την κλάση dark-mode σας (π.χ. .dark #divDocViewer { … }) για φόντα και περιθώρια καλύπτει τις περισσότερες ανάγκες, καθώς το περιεχόμενο της σελίδας αποδίδεται ως εικόνα. Για κεντρικές σελίδες RTL, ο προβολέας λειτουργεί άψογα μέσα σε διάταξη RTL — διατηρήστε τη δική σας γραμμή εργαλείων να είναι RTL‑συμβατή.

Τι δεν πρέπει να κάνετε

Μην κάνετε fork ή επεξεργασία των ενσωματωμένων φύλλων στυλ: παρέχονται μέσα στο πακέτο και αντικαθίστανται σε κάθε ενημέρωση. Οι παρακάμψεις στο δικό σας φύλλο στυλ παραμένουν μετά τις αναβαθμίσεις· οι επεξεργασίες στο viewer.css δεν διατηρούνται.

Ήταν αυτή η σελίδα χρήσιμη;