MFE Document Viewer Integration Guide

infodocviewdoc es una librería Angular para previsualizar documentos en microfrontends.

1) Instalacion del paquete (ultima version)

npm i infodocviewdoc

2) Dependencias requeridas en el host (package.json)

Si tu MFE ya existe (con Angular y dependencias base), solo debes agregar estas nuevas:

{
  "dependencies": {
    "infodocviewdoc": "3.0.1",
    "@handsontable/angular": "^16.2.0",
    "handsontable": "^16.2.0",
    "jspdf": "^4.1.0",
    "ngx-extended-pdf-viewer": "^25.6.4",
    "xlsx": "^0.18.5"
  }
}

En resumen: si comparas contra tu package.json anterior, las nuevas para integrar el visor son:

• infodocviewdoc
• @handsontable/angular
• handsontable
• jspdf
• ngx-extended-pdf-viewer
• xlsx

Ejemplo completo para un MFE nuevo

Si creas un microfront desde cero, ademas de Angular/base, tu bloque de dependencies debe terminar incluyendo al menos:

{
  "dependencies": {
    "@angular/animations": "19.2.4",
    "@angular/common": "19.2.4",
    "@angular/core": "19.2.4",
    "@angular/forms": "19.2.4",
    "@angular/platform-browser": "19.2.4",
    "@angular/platform-browser-dynamic": "19.2.4",
    "@angular/router": "19.2.4",
    "rxjs": "~7.8.0",
    "tslib": "2.3.0",
    "zone.js": "~0.15.0",
    "infodocviewdoc": "^3.0.1",
    "@handsontable/angular": "^16.2.0",
    "handsontable": "^16.2.0",
    "jspdf": "^4.1.0",
    "ngx-extended-pdf-viewer": "^25.6.4",
    "xlsx": "^0.18.5"
  }
}

Despues de agregarlas:

npm install

3) Configuracion de assets PDF viewer en angular.json (host)

Los ficheros de PDF.js (viewer-*.mjs, workers, cmaps, etc.) viven en node_modules/ngx-extended-pdf-viewer/assets. El host debe copiarlos al build para poder servirlos bajo la ruta base de la aplicacion (normalmente /assets/).

Donde colocarlo

En el proyecto del MFE, dentro del target que realmente usa ng build / ng serve (suele llamarse esbuild, build o application), en architect.<target>.options.assets (no solo en el target test).

Ejemplo con el builder moderno de aplicacion (@angular-devkit/build-angular:application):

"architect": {
  "esbuild": {
    "builder": "@angular-devkit/build-angular:application",
    "options": {
      "assets": [
        {
          "glob": "**/*",
          "input": "public"
        },
        {
          "glob": "**/*",
          "input": "node_modules/ngx-extended-pdf-viewer/assets",
          "output": "/assets/"
        }
      ]
    }
  }
}

• Ajusta el primer bloque (public, src/assets, etc.) segun tu proyecto; lo importante es anadir el segundo bloque con ngx-extended-pdf-viewer/assets.
• output: "/assets/" hace que los ficheros queden disponibles como https://<tu-host>/assets/viewer-*.mjs (y el resto de recursos en el mismo prefijo).

Si no configuras estos assets

• La libreria puede cargar los mismos recursos desde un CDN (jsDelivr) alineado a la version de ngx-extended-pdf-viewer: en muchos entornos el PDF funcionara igual sin copiar assets.
• Conviene mantener la entrada en angular.json si necesitas: sin acceso a internet, CSP que bloquea dominios externos, o politica de no depender de CDN.

Si sirves los assets locales pero con otra ruta

Puedes usar el input opcional pdfAssetsBaseUrl en el componente (por ejemplo la URL base donde el host publica los ficheros, sin barra final o normalizada).

<sgdea-document-viewer
  [pdfAssetsBaseUrl]="'https://mi-dominio.com/assets'"
  ...
></sgdea-document-viewer>

Si no se define pdfAssetsBaseUrl y el host no sirve /assets/ con los ficheros del viewer, se usara el fallback CDN interno.

Sintoma tipico si falta todo (host sin assets y sin CDN)

Error en red 404 sobre http(s)://<host>/assets/viewer-*.mjs y el PDF no se renderiza aunque la descarga del archivo sea 200.

4) Como importar y usar el componente

Import en componente standalone

import { PdfViewerComponent } from 'infodocviewdoc';

@Component({
  standalone: true,
  imports: [PdfViewerComponent]
})
export class PdfPreviewModalComponent {}

Uso en template

<sgdea-document-viewer
  [fileBlob]="blob"
  [fileBlobName]="fileName"
  [url]="apiUrl"
  [token]="token"
  [pdfAssetsBaseUrl]="'https://mi-dominio.com/assets'">
</sgdea-document-viewer>

5) Inputs del componente

• fileBlob: File | Blob del documento ya resuelto por el microfront (requerido).
• fileBlobName (opcional): nombre del archivo para inferir la extensión (p. ej. documento.pdf).
• url (requerido solo para Office->PDF): base URL del microservicio de conversión (ej: https://host-backend).
• token (requerido solo para Office->PDF): JWT para Authorization: Bearer <token>.
• pdfAssetsBaseUrl (opcional): URL base donde el host publica los assets de ngx-extended-pdf-viewer (p. ej. https://mi-app.com/assets).

Notas:

• Para PDFs/imágenes/texto/Excel el visor renderiza el fileBlob directamente.
• Para Word/PowerPoint el visor llama al microservicio de conversión y requiere url y token.

6) Checklist de integración (microfront)

1. Tu microfront descarga/prepara el archivo y le pasa el contenido al componente con [fileBlob].
2. Opcional pero recomendado: pasa [fileBlobName] para que el visor detecte la extensión con precisión (especialmente en blobs cuyo type es vacío o genérico).
3. Si el documento es Office (doc/docx/ppt/pptx), el microfront debe pasar [url] y [token] para que el visor ejecute la conversión a PDF.
4. Verifica en red que el visor carga viewer-*.mjs y workers:
   • recomendado: copiar node_modules/ngx-extended-pdf-viewer/assets al build vía angular.json (ver sección 3).
   • alternativa: usar fallback CDN o definir [pdfAssetsBaseUrl].

7) Consideraciones de integracion en MFE

• El componente requiere [fileBlob] para renderizar.
• En modales, usa contenedor con height definido y overflow para Excel grandes.
• Para obtener token en host, puedes usar localStorage o tu servicio de autenticacion central.
• Mantener contrato estable: forma de datos enviados al visor via inputs ([fileBlob], [fileBlobName], y [url]/[token] solo para Office->PDF).

8) Formatos soportados por el visor

• Procesamiento de texto: .docx, .doc
• Hojas de calculo: .xlsx, .xls
• Presentaciones: .pptx, .ppt
• Documentos portatiles: .pdf
• Texto plano: .txt
• Imagenes: .jpg, .png, .tiff, .gif

9) Ejemplo rapido de instalacion local (desarrollo)

Desde el repositorio de la libreria:

npm run build:lib
cd dist/ui-components
npm pack

En el MFE host:

npm install "C:/ruta/a/infodocviewdoc-<version>.tgz"

10) Public API exportada

public-api.ts exporta:

• PdfViewerComponent

Si integras este paquete en otro microfront, valida primero:

1. dependencias del host,
2. assets de ngx-extended-pdf-viewer en angular.json del target de build (recomendado) o, si no, que el entorno permita el fallback CDN / pdfAssetsBaseUrl,
3. envio correcto de fileBlob/fileBlobName; y url/token solo si el archivo es Office (para conversión).