Cómo los desarrolladores incrustan la visualización de PDF, Office y CAD en aplicaciones web .NET, React, Angular o Vue para aumentar la facilidad de uso y la eficiencia: paso a paso
Si estás intentando transformar una aplicación .NET cargada de documentos en algo que los usuarios realmente disfruten, necesitas un visor que maneje PDFs, archivos Word, hojas Excel, presentaciones PowerPoint y dibujos CAD, todo sin obligar a los usuarios a descargar una aplicación de escritorio o depender de un servicio externo en la nube. Ahí es donde Doconut interviene. Es un visor de documentos del lado del servidor que transmite páginas renderizadas a los navegadores web compatibles y proporciona anotaciones nativas, búsqueda de texto completo (incluido OCR) e impresión controlada desde el primer momento. En esta guía recorreremos todo el flujo de trabajo: desde la configuración del motor de conversión de Doconut en un back‑end ASP.NET Core, hasta la incrustación del visor en front‑ends React, Angular y Vue. ¿Listo para lanzar una experiencia documental fluida y eficiente? Vamos a sumergirnos.
1. Por qué un visor dedicado es importante para aplicaciones web empresariales
El costo oculto de “descargar‑y‑abrir”
La mayoría de los portales heredados simplemente dejan un enlace a un archivo en un recurso compartido. Al hacer clic, el archivo se descarga o se abre con un programa instalado localmente. En la práctica, esto genera varios problemas:
- Contexto perdido – los usuarios abandonan el portal, abren el documento en una ventana separada y luego deben recordar dónde estaban.
- Renderizado inconsistente – los visores locales de Word, Excel y CAD pueden interpretar los archivos de manera diferente, provocando fallos de diseño que pueden afectar decisiones legales o de ingeniería.
- Riesgo de seguridad – los archivos salen del perímetro corporativo, lo que convierte los registros de auditoría y las políticas de prevención de pérdida de datos en una pesadilla.
- Baja productividad – los revisores manejan múltiples herramientas solo para anotar, buscar o imprimir, lo que ralentiza las aprobaciones.
Lo que los desarrolladores realmente necesitan
Una solución moderna debería:
- Renderizar cada formato compatible en el navegador (PDF, DOCX, XLSX, PPTX, DWG, DXF, …).
- Exponer una API limpia para back‑ends .NET y front‑ends React, Angular o Vue.
- Incluir anotaciones, búsqueda de texto completo (OCR incluido) e impresión controlada sin necesidad de bibliotecas adicionales.
- Escalar de forma segura — procesar documentos en el servidor, transmitirlos como mosaicos de imágenes y nunca exponer los archivos sin procesar al cliente.
Doconut cumple con todos esos requisitos. Su biblioteca de visor se ejecuta en el servidor .NET, convierte los documentos fuente en páginas rasterizadas bajo demanda y sirve esas páginas a través de un endpoint HTTP ligero consumido por las integraciones front‑end compatibles.
2. Configuración del middleware Doconut para la conversión de PDF en una aplicación ASP.NET Core
El primer paso es registrar el middleware de Doconut para que el back‑end pueda servir mosaicos de documentos, miniaturas y datos de anotación. Esto se hace en la canalización de solicitudes de ASP.NET Core y solo requiere un par de registros de servicios para caché y contexto de solicitud.
Registro del middleware
Agrega los servicios requeridos (caché de memoria distribuida y accessor de contexto HTTP) en ConfigureServices. Luego, en Configure, asigna el endpoint de Doconut (comúnmente DocImage.axd) al middleware de Doconut. Las opciones del middleware te permiten imponer renderizado seguro y ocultar diagnósticos internos a los usuarios finales.
Inicialización de la licencia
Doconut requiere un archivo de licencia al iniciar. El enfoque típico es incrustar la licencia como recurso y cargarla como flujo cuando la aplicación arranca. Una vez que el flujo de licencia se proporciona a la instancia del visor Doconut, el SDK se activa por completo y está listo para procesar documentos.
Apertura de un documento y obtención de un token
Cuando un usuario solicita un documento, el back‑end abre el archivo a través de la API de Doconut, suministrando parámetros opcionales como protección con contraseña, resolución de imagen y tiempo de espera. Doconut devuelve un token corto (usualmente un GUID) que representa de forma única el documento abierto. El front‑end incluye este token en cada solicitud de mosaico, por ejemplo /DocImage.axd?token=abcd1234&page=1&zoom=100.
3. Exposición de una API segura de transmisión de documentos para frameworks JavaScript
Aunque Doconut ya proporciona un manejador de mosaicos de bajo nivel mediante middleware, la mayoría de los equipos prefieren un controlador ligero que añada autenticación, registro y marcas de agua opcionales.
Responsabilidades típicas del controlador
- Endpoint de apertura – Acepta un identificador de documento, resuelve la ruta física del archivo, llama a Doconut para abrir el documento y devuelve el token generado.
- Endpoint de miniatura – Devuelve un PNG pequeño para una página dada, útil para tiras de navegación. El controlador puede simplemente redirigir al manejador de mosaicos de Doconut con la cadena de consulta adecuada.
Consideraciones de seguridad
Almacena el token en la sesión del usuario o incrústalo en una reclamación JWT de corta duración. Como el token por sí solo no puede recuperar el archivo original sin la caché del lado del servidor, el documento permanece protegido. La misma API REST respalda los patrones de integración de React, Angular y Vue descritos en esta guía.
4. Incrustación del visor en una aplicación React
Los desarrolladores de React pueden crear un componente funcional que:
- Llame al endpoint
/openpara obtener un token del documento solicitado. - Construya un arreglo de URLs de imágenes que apunten al manejador de mosaicos de Doconut para cada página (puedes comenzar con las diez primeras páginas y cargar más bajo demanda).
- Renderice las páginas como elementos
<img>, manejando eventos de desplazamiento o zoom mediante la actualización de los parámetros de la URL.
Interacción con los puntos de integración JavaScript de Doconut
Doconut inyecta un asistente JavaScript ligero en la página. A través de este asistente puedes emitir comandos como:
- Resaltar un término – solicita una búsqueda de texto completo en todo el documento y resalta las palabras coincidentes.
- Agregar una anotación – coloca una nota adhesiva, sello o dibujo en una página específica enviando una carga JSON que incluya número de página, tipo de anotación, coordenadas y cualquier dato adicional.
Como el trabajo pesado de renderizado permanece en el servidor, el bundle de React sigue siendo pequeño y la UI se mantiene responsiva.
5. Incrustación del visor en Angular y Vue – Patrones de componentes reutilizables
Angular
Crea un servicio Angular que refleje la pequeña API .NET (abrir documento, obtener miniatura). El servicio usa HttpClient para llamar a los endpoints del back‑end y devuelve el token como un observable.
Luego construye un componente que, al inicializarse, solicite el token, genere las URLs de imágenes de página y las muestre con *ngFor. El componente puede exponer botones que llamen al asistente JavaScript de Doconut para anotaciones y búsquedas, de forma similar al ejemplo de React.
Vue
En Vue, define un componente que utilice el hook de ciclo de vida created para solicitar el token mediante fetch o axios. Guarda el token y las URLs de página generadas en el objeto data del componente. Renderiza las páginas con un bucle v-for. La reactividad de Vue facilita la actualización de la vista cuando el usuario se desplaza, hace zoom o dispara una acción de anotación a través del asistente JavaScript de Doconut.
Los tres frameworks comparten el mismo contrato de back‑end, por lo que puedes reutilizar el mismo controlador ASP.NET Core sin modificaciones.
Conclusión
Incrustar un visor de documentos completo ya no requiere un mosaico de plugins de terceros o servicios en la nube costosos. Con Doconut, los desarrolladores obtienen una única biblioteca del lado del servidor que renderiza archivos PDF, Office y CAD, brinda anotaciones, búsqueda con OCR e impresión controlada, todo mientras mantiene los documentos seguros y escalables.
¿Listo para elevar la experiencia documental en tu aplicación .NET, React, Angular o Vue? Prueba Doconut hoy y descubre lo rápido que puedes lanzar un visor empresarial pulido que tus usuarios amarán.