DoctVault: Plataforma Web de Procesamiento de PDFs en el Navegador | Proyectos | ApisDom

DoctVault : Plataforma de Procesamiento de PDFs 100% en Cliente

DoctVault es una aplicación web en producción diseñada para realizar operaciones avanzadas sobre documentos PDF directamente en el navegador del usuario, sin subir archivos a servidores externos.

La plataforma implementa un motor completo de procesamiento PDF en cliente, basado en una arquitectura modular con Web Workers, estado centralizado y validaciones conscientes del dispositivo.

Funcionalidades implementadas en producción

Firma de PDFs mediante canvas táctil (desktop y móvil), con suavizado de trazo y posicionamiento visual.
Creación de documentos A4 con DNI/documentos a doble cara en una sola hoja.
Unión y división de múltiples PDFs con batching según dispositivo.
Reordenación visual de páginas mediante drag & drop.
Eliminación selectiva de páginas.
Protección de PDFs con contraseña (AES-128/256).
Eliminación de contraseñas y restricciones de impresión/copia.
Conversión de imágenes a PDF multipágina.
Extracción de páginas PDF a imágenes.

Arquitectura técnica

Procesamiento principal encapsulado en un módulo central (pdfProcessor.js) con más de 10 operaciones PDF reales.
Uso de Web Workers para operaciones pesadas (merge, split, reorder, delete) evitando bloqueo de la UI.
Gestión de estado con Zustand para archivos, configuración y progreso.
Sistema de batching dinámico (móvil/desktop) y control de rendimiento.
Renderizado de PDFs con pdfjs-dist.
Firma táctil con canvas y generación de PNG recortado para inserción precisa.
Internacionalización (ES/EN) y dark mode.
Arquitectura SPA con rutas individuales por herramienta.

Ejemplo real de procesamiento (Web Worker + progreso)

// pdfProcessor.worker.js
postMessage({ type: 'PROGRESS', value: progress })

const mergedPdf = await mergePDFs(files, {
  onProgress: (p) => sendProgress(p)
})

postMessage({ type: 'SUCCESS', blob: mergedPdf })

La plataforma implementa un flujo completo de firma y manipulación visual de documentos PDF, combinando renderizado en canvas, posicionamiento interactivo y conversión a coordenadas reales del documento.

El usuario puede dibujar una firma directamente sobre el PDF, posicionarla visualmente y redimensionarla antes de que sea insertada en el documento final.

El procesamiento final se ejecuta mediante el motor PDF y Web Workers para mantener la interfaz fluida.

Ejemplo real de comunicación con Web Worker durante una operación PDF:

// pdfProcessor.worker.js
postMessage({ type: 'PROGRESS', value: progress })

const mergedPdf = await mergePDFs(files, {
  onProgress: (p) => sendProgress(p)
})

postMessage({ type: 'SUCCESS', blob: mergedPdf })
Este enfoque permite mostrar progreso en tiempo real al usuario mientras se realizan operaciones como unión, división o modificación de páginas, sin bloquear la interfaz ni depender de servicios externos.