Guia de Impresion y Exportacion PDF

Esta guia explica como utilizar el sistema de impresion y exportacion PDF integrado en la documentacion de Procesar.

Resumen

El sistema de impresion hibrido ofrece dos opciones principales:

1. Impresion CSS: Usa los estilos CSS optimizados y el dialogo de impresion del navegador
2. Exportacion PDF: Genera PDFs profesionales mediante Puppeteer en el servidor

Uso Basico

Boton de Impresion

INFORMACIÓN

Ubicacion: En todas las paginas de documentacion (excepto la pagina principal), encontraras un boton de impresion flotante en la esquina inferior derecha.

Opciones Disponibles

Al hacer clic en el boton, se despliega un menu con las siguientes opciones:

1. Imprimir (Impresora)

CONSEJO

Uso recomendado: Ideal para imprimir directamente en papel.

• Abre el dialogo de impresion del navegador
• Usa estilos CSS optimizados para impresion

2. Exportar PDF

CONSEJO

Uso recomendado: Ideal para compartir digitalmente.

• Genera un archivo PDF profesional
• Ofrece configuracion avanzada de pagina

Configuracion Avanzada

El menu de exportacion PDF incluye las siguientes opciones de configuracion:

Opcion	Descripcion	Valores disponibles
Tamano	Formato de pagina	A4, Carta, Oficio
Orientacion	Disposicion de pagina	Vertical, Horizontal
Incluir encabezado	Agrega titulo en la parte superior	Si/No
Incluir pie de pagina	Agrega numeracion de paginas	Si/No

Personalizacion

Configuracion por Pagina

Puedes personalizar el comportamiento de impresion en cada pagina usando frontmatter:

---
title: "Mi Documento"
print: true
printTitle: "Titulo Personalizado"
printTarget: ".contenido-especifico"
printClass: "formato-especial"
---

Opciones de Frontmatter

Propiedad	Tipo	Descripcion	Ejemplo
print	boolean	Habilita/deshabilita el boton de impresion	false
printTitle	string	Titulo personalizado para el PDF	"Guia oficial"
printTarget	string	Selector CSS del contenido a imprimir	".contenido-principal"
printClass	string	Clases CSS adicionales para impresion	"formato-compacto"

Estilos de Impresion

Optimizaciones Automaticas

El sistema incluye optimizaciones automaticas para impresion:

• Tipografia: Tamano de fuente optimizado (12pt base)
• Colores: Alto contraste para legibilidad
• Diagramas: Los diagramas Mermaid se imprimen correctamente
• Codigo: Sintaxis resaltada con buen contraste
• Tablas: Bordes definidos y headers claros
• Enlaces: Se muestran las URLs para referencia

Clases CSS Helper

Puedes usar estas clases en tu contenido:

<div class="page-break-before">Se empieza nueva pagina aqui</div>
<div class="page-break-after">Se termina pagina aqui</div>
<div class="avoid-break">Este bloque no se divide entre paginas</div>
<div class="print-only">Visible solo al imprimir</div>
<div class="screen-only">Visible solo en pantalla</div>

Configuracion del Servidor PDF

Requisitos

INFORMACIÓN

Dependencias necesarias: Para usar la exportacion PDF avanzada, necesitas:

1. Node.js instalado
2. Chrome o Chromium en el sistema
3. Dependencias del proyecto instaladas

Iniciar el Servidor

CONSEJO

Opcion 1: Solo servidor PDF

npm run pdf-server

CONSEJO

Opcion 2: Desarrollo completo (VitePress + servidor PDF)

npm run dev:full

Configuracion de Chrome

ADVERTENCIA

Configuracion manual: El servidor intenta automaticamente encontrar Chrome en tu sistema. Si no lo encuentra, puedes especificar la ruta:

Windows:

set CHROME_PATH="C:\Program Files\Google\Chrome\Application\chrome.exe"
npm run pdf-server

macOS:

export CHROME_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
npm run pdf-server

Linux:

export CHROME_PATH="/usr/bin/google-chrome-stable"
npm run pdf-server

Solucion de Problemas

Problemas Comunes

1. El PDF no se genera

PELIGRO

Problema critico: El servidor PDF no esta en ejecucion o Chrome no esta disponible.

Solucion:

# Verificar que el servidor este corriendo
curl http://localhost:3001/api/health

# Iniciar el servidor
npm run pdf-server

2. El boton de impresion no aparece

ADVERTENCIA

Configuracion requerida: La pagina tiene print: false en el frontmatter.

Solucion: Remover o cambiar a print: true en el frontmatter.

3. El contenido se corta en el PDF

ADVERTENCIA

Problema de layout: Elementos demasiado grandes para una pagina.

Solucion: Usar clases CSS helper:

<div class="avoid-break">
  <!-- Contenido que no debe dividirse -->
</div>

4. Los colores no se ven bien en impresion

INFORMACIÓN

Problema visual: Configuracion de impresion en blanco y negro.

Solucion: Verificar configuracion de impresora o usar estilos especificos:

@media print and (monochrome) {
  .mi-elemento {
    background: #f5f5f5 !important;
    color: #000 !important;
  }
}

Depuracion

Activar modo depuracion

CONSEJO

Para desarrolladores: Puedes agregar logs para depurar problemas:

// En el componente PrintButton.vue
console.log('Contenido a imprimir:', content)
console.log('Opciones:', printOptions.value)

Verificar servidor PDF

# Health check
curl http://localhost:3001/api/health

# Probar generacion manual
curl -X POST http://localhost:3001/api/generate-pdf \
  -H "Content-Type: application/json" \
  -d '{"html": "<h1>Test</h1>", "title": "Test PDF"}'

Mejores Practicas

Para Documentacion Tecnica

CONSEJO

Estructura recomendada:

1. Usar encabezados jerarquicos (H1 → H2 → H3)
2. Mantener parrafos cortos para mejor legibilidad
3. Usar listas en lugar de parrafos largos
4. Agregar saltos de pagina logicos antes de secciones grandes

Para Referencias Rapidas

CONSEJO

Formato optimizado:

1. Incluir tabla de contenidos al inicio
2. Usar formato compacto con printClass="formato-compacto"
3. Agrupar contenido relacionado para evitar divisiones

Para Tutoriales

CONSEJO

Contenido educativo:

1. Incluir codigo resaltado con sintaxis clara
2. Usar capturas de pantalla con buena resolucion
3. Agregar pasos numerados con espacio suficiente

Referencia Tecnica

Componentes Involucrados

1. PrintButton.vue: Componente principal de interfaz
2. Layout.vue: Layout personalizado con boton flotante
3. pdf-server.js: Servidor Express con Puppeteer
4. print.css: Estilos optimizados para impresion

Endpoints del Servidor

Endpoint	Metodo	Descripcion
/api/health	GET	Verificar estado del servidor
/api/generate-pdf	POST	Generar PDF con opciones avanzadas

Arquitectura del Sistema

El sistema sigue una arquitectura hibrida:

• PrintButton.vue: Componente principal que gestiona ambas opciones de impresion
• Opcion CSS: Utiliza window.print() con estilos @media print
• Opcion PDF: Comunica con servidor Puppeteer para generar PDFs profesionales
• Configuracion: Permite personalizar tamano, orientacion, encabezado y pie de pagina

---

Conclusión

El sistema de impresion y exportacion PDF de la documentacion de Procesar ofrece una solucion completa y flexible para generar copias fisicas y digitales del contenido.

Con opciones tanto basicas como avanzadas, puedes adaptar la salida a tus necesidades especificas, ya sea para imprimir rapidamente o generar PDFs profesionales con configuracion personalizada.

¿Necesitas ayuda adicional? Revisa la seccion de Solucion de Problemas o contacta al equipo de desarrollo.