Como desenvolvedores incorporam visualização de PDF, Office e CAD em aplicativos web .NET, React, Angular ou Vue para aumentar a facilidade de uso e eficiência: passo a passo
Se você está tentando transformar uma aplicação .NET carregada de documentos em algo que os usuários realmente apreciem, precisa de um visualizador que manipule PDFs, arquivos Word, planilhas Excel, apresentações PowerPoint e desenhos CAD — tudo sem forçar os usuários a baixar um aplicativo de desktop ou depender de um serviço de nuvem externo. É aí que a Doconut entra. Ela é um visualizador de documentos server‑side que transmite páginas renderizadas para navegadores web compatíveis e oferece anotação nativa, busca de texto completo (incluindo OCR) e impressão controlada prontas para uso. Neste guia percorreremos todo o fluxo de trabalho: da configuração do motor de conversão da Doconut em um back‑end ASP.NET Core à incorporação do visualizador em front‑ends React, Angular e Vue. Pronto para entregar uma experiência de documentos fluida e eficiente? Vamos lá.
1. Por que um visualizador dedicado é importante para aplicativos web corporativos
O custo oculto de “download‑e‑abrir”
- Contexto perdido – os usuários deixam o portal, abrem o documento em uma janela separada e depois precisam lembrar onde estavam.
- Renderização inconsistente – visualizadores locais de Word, Excel e CAD podem interpretar os arquivos de forma diferente, causando falhas de layout que podem afetar decisões jurídicas ou de engenharia.
- Risco de segurança – os arquivos escapam do perímetro corporativo, tornando os registros de auditoria e as políticas de prevenção de perda de dados um pesadelo.
- Baixa produtividade – revisores precisam usar várias ferramentas apenas para anotar, pesquisar ou imprimir, atrasando as aprovações.
O que os desenvolvedores realmente precisam
- Renderizar todos os formatos suportados no navegador (PDF, DOCX, XLSX, PPTX, DWG, DXF, …).
- Expor uma API limpa para back‑ends .NET e front‑ends React, Angular ou Vue.
- Incluir anotação, busca de texto completo (OCR incluído) e impressão controlada sem precisar de bibliotecas adicionais.
- Escalar com segurança — processar documentos no servidor, transmiti‑los como blocos de imagem e nunca expor arquivos brutos ao cliente.
Doconut cumpre todos esses requisitos. Sua biblioteca de visualização roda no servidor .NET, converte documentos de origem em páginas rasterizadas sob demanda e serve essas páginas através de um endpoint HTTP leve consumido pelas integrações front‑end suportadas.
2. Configurando o Middleware Doconut para Conversão de PDF em uma Aplicação ASP.NET Core
O primeiro passo é registrar o middleware da Doconut para que o back‑end possa servir blocos de documentos, miniaturas e dados de anotação. Isso é feito no pipeline de requisições do ASP.NET Core e requer apenas algumas inscrições de serviço para cache e contexto de requisição.
Registrando o middleware
Adicione os serviços necessários (cache de memória distribuído e accessor de contexto HTTP) em ConfigureServices. Em seguida, em Configure, mapeie o endpoint da Doconut (geralmente DocImage.axd) para o middleware da Doconut. As opções do middleware permitem aplicar renderização segura e ocultar diagnósticos internos dos usuários finais.
Inicializando a licença
Doconut requer um arquivo de licença na inicialização. A abordagem típica é incorporar a licença como recurso e carregá‑la como stream quando a aplicação inicia. Uma vez que o stream de licença é fornecido à instância do visualizador Doconut, o SDK é totalmente ativado e pronto para processar documentos.
Abrindo um documento e obtendo um token
Quando um usuário solicita um documento, o back‑end abre o arquivo através da API da Doconut, fornecendo parâmetros opcionais como proteção por senha, resolução da imagem e tempo limite. A Doconut devolve um token curto (geralmente um GUID) que representa de forma única o documento aberto. O front‑end inclui esse token em cada requisição de bloco, por exemplo /DocImage.axd?token=abcd1234&page=1&zoom=100.
3. Expondo uma API Segura de Transmissão de Documentos para Frameworks JavaScript
Embora a Doconut já forneça um manipulador de blocos de baixo nível via middleware, a maioria das equipes prefere um controlador leve que adicione autenticação, registro de logs e marca d'água opcional.
Responsabilidades típicas do controlador
- Endpoint de abertura – aceita um identificador de documento, resolve o caminho físico do arquivo, chama a Doconut para abrir o documento e retorna o token gerado.
- Endpoint de miniatura – retorna um PNG pequeno para uma página específica, útil para faixas de navegação. O controlador pode simplesmente redirecionar para o manipulador de blocos da Doconut com a string de consulta apropriada.
Considerações de segurança
Armazene o token na sessão do usuário ou incorpore‑o em uma reivindicação JWT de curta duração. Como o token sozinho não pode recuperar o arquivo original sem o cache do lado do servidor, o documento permanece protegido. A mesma API REST suporta os padrões de integração React, Angular e Vue descritos neste guia.
4. Incorporando o Visualizador em uma Aplicação React
Desenvolvedores React podem criar um componente funcional que:
- Chama o endpoint
/openpara obter um token para o documento solicitado. - Constrói um array de URLs de imagens que apontam para o manipulador de blocos da Doconut para cada página (é possível iniciar com as primeiras dez páginas e carregar mais sob demanda).
- Renderiza as páginas como elementos
<img>, tratando eventos de rolagem ou zoom ao atualizar os parâmetros da URL.
Interação com os pontos de integração JavaScript da Doconut
A Doconut injeta um helper JavaScript leve na página. Por meio desse helper você pode emitir comandos como:
- Destacar um termo – solicita uma busca de texto completo em todo o documento e destaca as palavras correspondentes.
- Adicionar uma anotação – coloca um post‑it, selo ou desenho em uma página específica enviando um payload JSON que inclui número da página, tipo de anotação, coordenadas e quaisquer dados adicionais.
Como o trabalho pesado de renderização permanece no servidor, o bundle do React permanece pequeno e a interface permanece responsiva.
5. Incorporando o Visualizador em Angular e Vue – Padrões de Componentes Reutilizáveis
Angular
Crie um serviço Angular que espelhe a pequena API .NET (abrir documento, buscar miniatura). O serviço usa HttpClient para chamar os endpoints do back‑end e retorna o token como um observable.
Em seguida, construa um componente que, na inicialização, solicite o token, construa as URLs das imagens das páginas e as exiba com *ngFor. O componente pode expor botões que chamem o helper JavaScript da Doconut para anotação e busca, semelhante ao exemplo em React.
Vue
No Vue, defina um componente que use o hook de ciclo de vida created para solicitar o token via fetch ou axios. Armazene o token e as URLs das páginas geradas no objeto de dados do componente. Renderize as páginas com um loop v-for. A reatividade do Vue facilita a atualização da visualização quando o usuário rola, dá zoom ou dispara uma ação de anotação através da integração JavaScript da Doconut.
Os três frameworks compartilham o mesmo contrato de back‑end, portanto você pode reutilizar o mesmo controlador ASP.NET Core sem modificações.
Conclusão
Incorporar um visualizador de documentos completo não requer mais um mosaico de plugins de terceiros ou serviços de nuvem caros. Com Doconut, os desenvolvedores obtêm uma única biblioteca server‑side que renderiza arquivos PDF, Office e CAD, fornece anotação, busca alimentada por OCR e impressão controlada — tudo enquanto mantém os documentos seguros e escaláveis.
Pronto para elevar a experiência de documentos em sua aplicação .NET, React, Angular ou Vue? Experimente a Doconut hoje e veja quão rápido você pode entregar um visualizador refinado, de nível empresarial, que seus usuários vão adorar.