Visor DOCX en ASP.NET Core: Vista previa de archivos Word
← Back to Blog••6 min read

Visor DOCX en ASP.NET Core: Vista previa de archivos Word

Para previsualizar un documento Word dentro de una aplicación ASP.NET Core, use un SDK de visor DOCX que renderiza el archivo en el servidor y muestra sus páginas en el navegador. Doconut proporciona este flujo de trabajo sin requerir Microsoft Word en el servidor. Sus usuarios pueden leer un contrato, propuesta o informe dentro de su aplicación en lugar de abrir un programa de escritorio separado.

Un informe marfil con tablas y gráficos se extiende desde una carpeta azul marino hacia un marco de vidrio claro
Un informe marfil con tablas y gráficos se extiende desde una carpeta azul marino hacia un marco de vidrio claro

La pregunta útil es qué ocurre cuando reemplaza el archivo de demostración con sus propios documentos. Un contrato puede contener fuentes personalizadas, encabezados repetidos, tablas anchas y páginas de firma. Esta guía muestra el paso de apertura del documento para una aplicación .NET 8 y las verificaciones que le ayudan a evaluar el resultado.

Abrir un archivo DOCX desde C#

Comience con el inicio rápido de Doconut .NET 8 para configurar los servicios, la sesión ASP.NET, el middleware de documentos, los recursos del visor y el widget del navegador. El siguiente endpoint amplía esa aplicación configurada; no es una aplicación independiente completa.

Coloque un documento de prueba no sensible en App_Data/Sample.docx bajo la raíz de contenido de la aplicación. Añada este endpoint antes de app.Run():

using Doconut;

app.MapPost("/api/preview-word", async (
    Viewer viewer,
    IWebHostEnvironment environment) =>
{
    var filePath = Path.Combine(
        environment.ContentRootPath, "App_Data", "Sample.docx");

    if (!File.Exists(filePath))
        return Results.NotFound();

    var token = await viewer.OpenDocumentAsync(filePath);
    return Results.Ok(new { token });
});

Mantenga la directiva using con los demás imports al inicio de Program.cs. La ruta fija facilita reproducir el ejemplo y evita aceptar una ruta de servidor arbitraria desde el navegador.

La referencia de la API Viewer documenta la sobrecarga de ruta de archivo de OpenDocumentAsync. Abre el archivo y devuelve un token de sesión de documento. En la página donde el inicio rápido ya ha inicializado objViewer, abra la vista previa con:

async function previewWordDocument() {
    const response = await fetch('/api/preview-word', {
        method: 'POST'
    });

    if (!response.ok) {
        throw new Error('The Word preview could not be opened.');
    }

    const { token } = await response.json();
    objViewer.View(token);
}

Llama a esta función desde la acción de vista previa de su página y muestre cualquier error a través de la interfaz de error existente de la aplicación. Mantenga la solicitud en el mismo origen de la aplicación que el visor en este ejemplo.

Mantener el acceso a documentos bajo control de la aplicación

En un portal de clientes, reemplace la muestra fija con un registro de documento seleccionado por su aplicación. Verifique que el usuario actual pueda ver ese registro antes de resolver su ubicación de almacenamiento y abrirlo. Un nombre de archivo recibido del navegador no constituye una decisión de autorización.

Almacene los originales protegidos fuera de la raíz pública del sitio web. La carpeta App_Data del ejemplo es una convención de almacenamiento, no una característica de control de acceso: no la exponga mediante un mapeo de archivos estáticos. Mantenga la autenticación y los permisos de documentos en la aplicación anfitriona.

El navegador recibe un token de visualización para la sesión del documento. Trate ese token como una credencial en lugar de una URL permanente del documento. El inicio rápido también cubre el cierre de un documento cuando el lector se va o abre otro archivo.

Probar el diseño de Word con archivos representativos

Un DOCX vacío demuestra poco sobre los documentos que utilizan sus clientes. Construya un pequeño conjunto de evaluación a partir de las plantillas reales que su aplicación necesita mostrar, con la información sensible eliminada.

Documento de pruebaQué inspeccionar en la vista previa
Contrato con encabezados y pies de páginaContenido repetido, números de página y ubicación de la página de firma
Propuesta usando una fuente corporativaSustitución de fuentes, ajuste de líneas y anchura de encabezados
Informe con tablas anchas o anidadasAnchura de columnas, división de filas y texto recortado en los límites de la página
Documento que combina secciones verticales y horizontalesDimensiones de página y la transición entre secciones
Manual con muchas imágenesUbicación de imágenes, pies de foto y legibilidad al hacer zoom

Compare el resultado renderizado con el documento fuente aprobado. Decida qué diferencias son relevantes para su flujo de trabajo antes de comprometerse con la integración.

Doconut expone configuraciones de renderizado específicas de Word a través de WordConfig. La referencia de configuración de formatos incluye FontFolders para directorios de fuentes adicionales, configuraciones de tamaño de papel y AutoFitAllTables para ajuste de tablas. Cambie estos deliberadamente: hacer que una tabla se ajuste al ancho disponible también puede cambiar el diseño que está intentando preservar.

Repita las verificaciones en el host de despliegue. Una vista previa que usa una fuente instalada en la máquina de un desarrollador puede verse diferente cuando esa fuente falta en el servidor. Use fuentes que su organización tenga permiso de desplegar.

Elegir visualización, edición y conversión por separado

Una vista previa de DOCX resuelve el paso de lectura. No convierte su aplicación en un entorno de autoría de Word.

  • Lectura: use el visor cuando alguien necesita inspeccionar un documento existente dentro de un caso, pedido o registro de cliente.
  • Edición: si los usuarios deben reescribir párrafos y guardar un DOCX actualizado, evalúe un flujo de trabajo de edición por separado. Previsualizar un archivo no es evidencia de soporte de edición de Word.
  • Conversión: si el requisito es un archivo descargable en otro formato, evalúe ese flujo de exportación por separado de la visualización de páginas.

La descripción general del visor Word para .NET describe la ruta de visualización de la familia Word de Doconut. Úsela para comprobar la adecuación del producto, luego use sus propios archivos para evaluar el comportamiento de renderizado que importa a su aplicación.

Evaluar el visor con su documento más difícil primero

Comience con un documento que ya genera solicitudes de soporte: un contrato largo, un informe con muchas tablas o una plantilla con fuentes inusuales. Verifique la vista previa, navegue varias páginas, ábralo de nuevo en una sesión nueva y confirme que la aplicación circundante impone los permisos de documento correctos.

Descargar Doconut y ejecute el ejemplo .NET 8 con ese archivo. Una evaluación exitosa debe demostrar que los usuarios pueden leer los documentos que realmente reciben, con un diseño que su equipo ha revisado y una integración que su aplicación pueda mantener.

#DOCX Viewer#ASP.NET Core#Word Documents#C##Document Preview#Visor DOCX#Documentos Word#Vista previa de documento