Temas Personalizados

Estilize o visualizador para combinar com seu aplicativo

O visualizador vem com um visual neutro baseado em Bootstrap, servido a partir dos recursos incorporados (viewer.css, além de folhas de estilo por recurso como searchBar.css e annotationBar.css). A tematização ocorre em três níveis — escolha o mais superficial que atender às suas necessidades.

Nível 1 — Configurar a interface

Muita “tematização” é na verdade configuração:

  • ViewerConfig.ShowThumbs = false — sem painel de miniaturas.
  • ViewerConfig.FitType = "height" | "width" — como as páginas preenchem a área de visualização.
  • ViewerConfig.ShowThumbs = false junto com pacotes seletivos CssConfig/ScriptConfig — mantenha apenas a interface que seu host utiliza.

Nível 2 — Substituir o CSS

Viewer.ReferenceCss() gera tags <link> simples; tudo que você carregar depois delas vence a cascata. Defina tamanho e enquadre o visualizador a partir da sua própria folha de estilos:

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

A página host controla totalmente o layout externo — o widget é renderizado dentro da caixa que você fornecer a #divDocViewer / #div_ctlDoc (o par de contêineres padrão do Quick Start).

Duas regras práticas:

  • Não carregue o Bootstrap duas vezes. Se seu aplicativo já inclui Bootstrap, ignore IncludeBootstrapCss/IncludeBootstrap e deixe o widget herdar o seu — isso por si só faz o visualizador parecer nativo ao seu app.
  • Inclua apenas os pacotes que você usa. Cada flag CssConfig/ScriptConfig é opt-in; menos pacotes, menos estilos para gerenciar.

Nível 3 — Crie sua própria barra de ferramentas

Para uma experiência totalmente personalizada, controle o widget a partir da sua própria UI — é exatamente assim que o exemplo de referência constrói a barra de ferramentas principal do Viewer. Essa barra é marcação do host mais um auxiliar específico da aplicação; não é uma Ribbon do SDK incorporada. A instância docViewer retornada na inicialização é a sua superfície de API, junto com seus próprios 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>

Pesquisa e Anotação são diferentes: seus componentes Ribbon opcionais estão incorporados no SDK (IncludeSearchBar, IncludeAnnotationBar) e geram seu próprio DOM. Você pode usá‑los junto com sua barra de ferramentas personalizada ou ignorá‑los e chamar as APIs subjacentes do widget diretamente. Consulte o pacote completo do Viewer no Quick Start para a ordem completa de integração.

Modo escuro e RTL

O widget não inclui um tema escuro; uma substituição de Nível 2 direcionada à sua classe de modo escuro (por exemplo, .dark #divDocViewer { … }) em fundos e bordas cobre a maioria das necessidades, já que o conteúdo da página é renderizado como imagens. Para hosts RTL, o visualizador funciona perfeitamente dentro de um layout RTL — mantenha sua própria barra de ferramentas ciente de RTL.

O que não fazer

Não faça fork nem edite as folhas de estilo incorporadas: elas são distribuídas dentro do pacote e são substituídas a cada atualização. Substituições na sua própria folha de estilos sobrevivem às atualizações; edições em viewer.css não.

Esta página foi útil?