C
7/10/2026

Como Incorporar um Visualizador de Documentos Sem Plugin em ASP.NET

Um guia passo a passo para engenheiros .NET que precisam incorporar o visualizador seguro e sem plugin do Doconut App em projetos ASP.NET Core, MVC ou WebForms.

Sim—você pode incorporar um visualizador de arquivos online seguro e sem plugin em qualquer aplicação ASP.NET Core, MVC ou WebForms em apenas alguns minutos, e o Doconut App faz todo o trabalho pesado.
Empresas que fornecem contratos, desenhos ou ativos de design precisam de um visualizador que respeite as políticas de segurança corporativas, funcione em todos os navegadores e nunca obrigue os usuários a instalar plugins de terceiros. O Doconut App entrega exatamente isso: um visualizador baseado em navegador que suporta PDF, Office, CAD e mais de 50 outros formatos, com criptografia AES‑256, uploads apenas via SSL e uma UI totalmente personalizável. Este post guia você por todo o fluxo—desde a proteção do upload até a renderização do visualizador—para que possa entregar uma solução polida de nível empresarial sem escrever um motor de renderização do zero.


1. Por que segurança e renderização sem plugin são importantes para apps web .NET

Empresas modernas tratam cada documento como um potencial vazamento de dados. Quando você incorpora um visualizador que depende de ActiveX, Flash ou um cliente nativo, herda três riscos:

RiscoImpacto na sua aplicação .NETComo o Doconut App elimina
Dependência de pluginUsuários precisam instalar ou habilitar um plugin no navegador, gerando tickets de suporte e dores de cabeça de conformidade.O Doconut roda totalmente em HTML5/Canvas, exigindo zero plugins.
Trânsito não criptografadoArquivos trafegam por HTTP ou são armazenados em texto puro, violando GDPR, HIPAA ou políticas internas.Todos os uploads passam por SSL e são armazenados com criptografia AES‑256.
Ciclo de vida descontroladoArquivos podem permanecer no servidor, aumentando a superfície de violação.O Doconut exclui arquivos após a visualização, garantindo uma janela curta de retenção.

Como o visualizador é entregue como um componente JavaScript que se comunica com o serviço de renderização seguro do Doconut, você mantém a pilha .NET limpa—sem bibliotecas nativas extras, sem binários de terceiros e sem auditorias de conformidade adicionais.


2. Preparando seu projeto .NET – a configuração mínima para ASP.NET Core, MVC e WebForms

Independente de você estar usando ASP.NET Core, MVC 5 ou WebForms, os passos de preparação são idênticos:

  1. Adicionar o bundle de script do Doconut
    O Doconut hospeda um script de visualizador leve em seu CDN. Adicione a linha a seguir na sua página de layout (ex.: _Layout.cshtml ou Site.Master):

    <script src="https://doconut.app/viewer.min.js"></script>
    
  2. Criar um elemento placeholder
    O visualizador injeta um canvas em qualquer <div> que você designar. Exemplo para Razor:

    <div id="docViewer" style="width:100%; height:800px;"></div>
    

    Para WebForms, coloque um <asp:Panel> com runat="server" e dê a ele ID="docViewer".

  3. Referenciar o CSS do Doconut (opcional)
    Se quiser a barra de ferramentas e o tema padrão, inclua o arquivo CSS:

    <link rel="stylesheet" href="https://doconut.app/viewer.min.css" />
    

Isso é tudo que você precisa em termos de ativos estáticos. O restante do trabalho acontece no seu código do lado do servidor (upload, criptografia, geração de token) e em um pequeno script de inicialização no cliente.


3. Construindo um endpoint de upload seguro – AES‑256, SSL e exclusão automática

O visualizador nunca acessa arquivos diretamente no seu sistema de arquivos. Em vez disso, você envia o documento para um local de armazenamento temporário e criptografado que o Doconut lê sob demanda. A seguir, uma descrição de alto nível das etapas necessárias para ASP.NET Core; as mesmas ideias se aplicam ao MVC e ao WebForms.

Fluxo do lado do servidor

  1. Aceitar o arquivo enviado – Use o padrão IFormFile (ou HttpPostedFile no WebForms) para receber o documento do cliente.
  2. Criptografar o arquivo com AES‑256 – Antes de persistir o stream, criptografe‑o usando uma biblioteca comprovada como System.Security.Cryptography.Aes. Armazene o blob criptografado em um local seguro (por exemplo, Azure Blob Storage com criptografia do lado do servidor habilitada, ou um bucket S3 com SSE‑AES256).
  3. Gerar uma URL assinada de curta duração – Crie uma URL válida por alguns minutos (ex.: 5 minutos). A URL deve ser HTTPS e incluir um token criptográfico que o Doconut possa validar. A maioria dos provedores de armazenamento em nuvem oferece um recurso de “URL pré‑assinada” que atende a essa necessidade.
  4. Retornar a URL assinada ao cliente – Envie uma resposta JSON contendo a URL. O cliente passará essa URL ao visualizador do Doconut.
  5. Agendar exclusão automática – Após a expiração da URL assinada, um job em background (Hangfire, Azure Functions, etc.) remove o blob criptografado, garantindo que o arquivo não permaneça no servidor.

Equivalentes MVC / WebForms

  • MVC – Coloque a mesma lógica dentro de uma ação de controlador regular e retorne JsonResult.
  • WebForms – Implemente um handler .ashx ou um método de página que siga os mesmos passos: receba Request.Files[0], criptografe, gere a URL pré‑assinada e escreva a resposta JSON.

A única diferença está na sintaxe de roteamento; o fluxo de segurança permanece idêntico.


4. Renderizando o visualizador Doconut – da URL ao canvas no navegador

Depois que o cliente recebe a URL assinada, o visualizador pode ser iniciado com uma única chamada JavaScript. O SDK do Doconut lida automaticamente com streaming, renderização e interações da UI.

<script>
    // Assume que `response.viewerUrl` contém a URL assinada retornada do endpoint de upload
    function launchViewer(viewerUrl) {
        // Inicializa o visualizador Doconut. O objeto global fornecido pelo script é `DoconutViewer`.
        DoconutViewer.init({
            containerId: "docViewer",   // O <div> que colocamos antes
            fileUrl: viewerUrl,          // URL HTTPS assinada para o arquivo criptografado
            toolbar: true,               // Exibir a barra de ferramentas integrada
            theme: "light"              // Tema visual opcional
        });
    }

    // Exemplo: após um upload bem‑sucedido
    fetch("/api/document/upload", {
        method: "POST",
        body: myFormData,
        credentials: "include"
    })
    .then(r => r.json())
    .then(data => launchViewer(data.viewerUrl));
</script>

Por que isso funciona em qualquer variante .NET

  • ASP.NET Core Razor – O script vive na mesma view que hospeda o formulário de upload, tornando o fluxo contínuo.
  • MVC – Use @section Scripts para injetar o mesmo trecho; o controlador retorna JSON que o $.ajax do MVC pode consumir.
  • WebForms – Registre o script com ClientScript.RegisterStartupScript após a conclusão do upload e chame launchViewer da mesma forma.

Como o Doconut faz streaming do documento diretamente da URL assinada, o servidor nunca toca no arquivo novamente após a etapa de upload. O visualizador renderiza PDFs, arquivos Word, desenhos CAD e todos os outros formatos listados nas especificações do produto—sem necessidade de conversão adicional no servidor.


5. Personalizando o visualizador para combinar com sua marca – ajuste fino do visualizador de arquivos online

Empresas frequentemente precisam que o visualizador tenha a mesma aparência de uma parte nativa do portal. A UI totalmente personalizável do Doconut App permite:

PersonalizaçãoComo aplicar em .NET
Layout da barra de ferramentasPasse toolbar: false e construa seus próprios botões que chamam a API JavaScript do visualizador (ex.: zoomIn(), print()).
Esquema de coresDefina theme: "dark" ou forneça um arquivo CSS customizado que sobrescreva as classes padrão.
Idioma e acessibilidadeO Doconut respeita o atributo lang no container; você também pode injetar rótulos ARIA via a opção accessibility.
Ganchos de eventosCallbacks como onPageChange, onError e onDownload permitem registrar métricas de uso em seu pipeline de telemetria existente.

Todas essas opções são configuradas no mesmo objeto JavaScript mostrado na seção anterior. Como o visualizador vive totalmente no cliente, não há carga extra no servidor—seu backend .NET continua focado em autenticação, criptografia e lógica de negócio.


6. Performance e escalabilidade – mantenha a experiência ágil

Incorporar um visualizador em um portal de alto tráfego levanta duas preocupações práticas: tempo de carregamento e renderização concorrente. O Doconut App trata ambos nativamente, mas você pode reforçar a performance com algumas dicas específicas para .NET.

PreocupaçãoVantagem incorporada do DoconutDica adicional para .NET
Download inicialScript do visualizador tem apenas ~150 KB, gzipped.Ative compressão de arquivos estáticos (app.UseResponseCompression()) e cache (Cache‑Control: public, max‑age=31536000).
Streaming de arquivosO Doconut faz streaming apenas das páginas necessárias, usando requisições de intervalo HTTP.Armazene blobs criptografados em um CDN regional (Azure Front Door, Amazon CloudFront) para reduzir latência.
Usuários simultâneosA renderização ocorre no cliente; o servidor só serve o arquivo criptografado uma vez por visualização.Regule o endpoint de upload com IApplicationRateLimiter para proteger contra picos.
Uso de memóriaNenhuma biblioteca de conversão PDF no servidor, mantendo o processo ASP.NET leve.Execute o serviço de upload em um microserviço separado se já possuir uma fila de jobs pesada.

Seguindo essas orientações, você pode suportar milhares de visualizadores simultâneos sem precisar escalar a camada .NET além do que já possui.


Principais Conclusões

  • O Doconut App oferece um visualizador seguro, sem plugin e 100 % que funciona com ASP.NET Core, MVC e WebForms.
  • Uploads são apenas via SSL, armazenados com criptografia AES‑256 e excluídos automaticamente após a expiração da URL assinada.
  • A integração requer apenas um script CDN, um <div> placeholder e um pequeno endpoint do lado do servidor que devolve uma URL assinada.
  • O visualizador suporta PDF, Office, CAD e mais de 50 formatos de imagem—sem necessidade de conversão no servidor.
  • A UI pode ser totalmente customizada para combinar com a identidade corporativa, e o visualizador oferece ferramentas de zoom, medição e camadas para arquivos CAD.
  • O desempenho é tratado no cliente; desenvolvedores .NET precisam apenas garantir compressão de arquivos estáticos e, opcionalmente, cache em CDN.
  • Todo o fluxo—do upload seguro à renderização no navegador—se encaixa perfeitamente nos pipelines de autenticação e autorização já existentes em .NET.

Perguntas Frequentes

P1: Preciso instalar algum pacote NuGet para usar o Doconut?
R: Não. O visualizador é entregue como um bundle JavaScript do lado do cliente a partir do CDN do Doconut. Seu servidor só precisa do middleware padrão do ASP.NET Core para uploads e criptografia, que provavelmente já está em uso.

P2: Como o Doconut garante que o arquivo seja excluído após a visualização?
R: O Doconut gera uma URL assinada de curta duração que expira após um período configurável (geralmente cinco minutos). Após a expiração, você (ou um job de limpeza em background) remove o blob criptografado, garantindo que o documento não permaneça armazenado por mais tempo do que o necessário, atendendo a políticas rígidas de retenção de dados.

P3: Posso imprimir ou exportar o documento pelo visualizador?
R: Sim. A barra de ferramentas padrão do Doconut inclui opções de impressão e exportação que preservam a qualidade e o layout original do arquivo fonte.


Pronto para incorporar um visualizador de documentos seguro e sem plugin na sua aplicação .NET? Comece agora com o Doconut App e entregue PDF, Office, CAD e dezenas de outros formatos de forma instantânea e segura.