カスタムテーマ

ビューアをアプリに合わせてスタイル設定

ビューアは、埋め込みリソース（viewer.css と、searchBar.css や annotationBar.css のような機能別スタイルシート）から提供される中立的な Bootstrap ベースの外観で提供されます。テーマ設定は 3 つのレベルで行われます — 最も浅いレベルから選んでください。

レベル 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; }

ホストページは外部レイアウトを完全に制御します — ウィジェットは #divDocViewer / #div_ctlDoc に与えた任意のボックス内に描画されます（Quick Start の標準コンテナペア）。

実用的なルールが 2 つあります：

  • Bootstrap を二重に読み込まないでください。 アプリがすでに Bootstrap を提供している場合、IncludeBootstrapCss/IncludeBootstrap をスキップし、ウィジェットに自分のものを継承させてください — これだけでビューアはアプリにネイティブな外観になります。
  • 使用するバンドルだけを含めてください。 すべての CssConfig/ScriptConfig フラグはオプトイン方式です。バンドルが少なければ少ないほど、対処すべきスタイルも減ります。

レベル 3 — 独自のツールバーを構築する

完全にブランド化された体験を実現するには、独自の UI からウィジェットを操作します — これがリファレンスサンプルがメイン Viewer ツールバーを構築する方法です。そのツールバーはホストのマークアップとアプリ固有のヘルパーで構成され、埋め込み SDK リボンではありません。初期化時に返される docViewer インスタンスは、あなたの API インターフェースであり、独自のエンドポイントと共に使用します：

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>

検索と注釈は異なります：それらのオプションのリボンコンポーネントは SDK に埋め込まれており（IncludeSearchBar、IncludeAnnotationBar）、独自の DOM を生成します。これらをカスタム Viewer ツールバーと共に使用することも、スキップして基礎となるウィジェット API を直接呼び出すこともできます。統合手順の全体像については、Quick Start の完全な Viewer パッケージ を参照してください。

ダークモードと RTL

ウィジェットにはダークテーマが同梱されていません；背景やボーダーに対してダークモード用クラス（例：.dark #divDocViewer { … }）を対象としたレベル 2 のオーバーライドを行うことで、ほとんどの要件を満たすことができます。ページコンテンツ自体は画像として描画されるためです。RTL ホストの場合、ビューアは RTL レイアウト内で問題なく動作します — 独自のツールバーも RTL に対応させてください。

やってはいけないこと

埋め込みスタイルシートをフォークしたり編集したりしないでください：それらはパッケージ内に同梱されており、毎回のアップデートで置き換えられます。独自のスタイルシートでのオーバーライドはアップグレード後も残りますが、viewer.css の編集は残りません。

このページは役に立ちましたか？