Convertir HTML a PDF manteniendo los estilos CSS: técnicas y herramientas
Convertir HTML a PDF preservando fielmente los estilos CSS es uno de los retos técnicos más comunes en el desarrollo web. Los colores de fondo que no aparecen, las fuentes que se reemplazan por genéricas, los layouts que se rompen — son problemas clásicos de la conversión HTML a PDF mal configurada. En este artículo técnico explicamos por qué ocurren estos problemas, cómo prevenirlos preparando correctamente el HTML y el CSS, y cómo WikiPlus HTML a PDF gestiona estas situaciones para producir resultados fieles al diseño original.
Por qué los colores de fondo desaparecen en la conversión a PDF
Uno de los problemas más comunes al convertir HTML a PDF es que los colores de fondo de secciones o el body desaparecen, dejando el fondo en blanco. Esto ocurre porque la mayoría de motores de conversión de HTML a PDF tienen activada por defecto la opción 'background-color: white' para simular el comportamiento de impresión — los navegadores también omiten los colores de fondo al imprimir por defecto. La solución es añadir en el CSS la propiedad de impresión: @media print { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }. Esta directiva indica al motor de conversión que respete los colores de fondo definidos en el CSS.
Fuentes web en la conversión HTML a PDF
Las fuentes cargadas desde Google Fonts u otras CDN externas pueden no cargarse durante la conversión si el motor no tiene acceso a internet o si la carga de recursos externos está deshabilitada por seguridad. Para garantizar que las fuentes se muestren correctamente, la mejor práctica es incrustar la fuente directamente en el CSS usando @font-face con la fuente codificada en base64, o usar fuentes del sistema como alternativa fiable: Arial, Helvetica, Georgia, Times New Roman son universalmente disponibles. Si usas Google Fonts, incluye el @import de Google Fonts al principio del CSS y verifica que el archivo HTML se carga con conexión a internet activa.
Controlar saltos de página en el PDF desde el CSS
Un diseño HTML fluido no siempre se traduce bien a páginas de PDF de tamaño fijo. El contenido puede cortarse de formas inesperadas en medio de una tabla, un párrafo o una imagen. La propiedad CSS page-break permite controlar esto con precisión: page-break-before: always en un elemento fuerza un salto de página antes de él; page-break-inside: avoid evita que un elemento se corte entre páginas; page-break-after controla los saltos después del elemento. Para tablas largas, page-break-inside: avoid en las filas de la tabla evita que una fila quede partida entre dos páginas. Estas propiedades CSS son el mecanismo estándar para controlar la paginación en conversiones HTML a PDF.
Tamaño y orientación de página desde el CSS con @page
La regla CSS @page permite definir el tamaño, los márgenes y la orientación del PDF desde el propio archivo HTML. Por ejemplo: @page { size: A4 portrait; margin: 20mm 15mm 25mm 15mm; } define un PDF A4 vertical con márgenes personalizados. Para facturas o recibos que deben ser en horizontal, usa @page { size: A4 landscape; }. Para páginas de tamaño personalizado, puedes especificar las dimensiones en mm: @page { size: 210mm 297mm; }. Definir estos parámetros desde el CSS garantiza que el PDF resultante tenga exactamente las dimensiones deseadas independientemente de la configuración del sistema donde se realiza la conversión.
Preguntas frecuentes
- ¿Por qué las imágenes no aparecen en el PDF convertido?
- Las imágenes referenciadas con rutas relativas (src='./img/foto.jpg') no se cargan si no están incluidas en el archivo subido. La solución es convertir las imágenes a base64 e incrustarlas directamente en el atributo src del HTML, o subir el HTML junto con sus recursos en un archivo ZIP si la herramienta lo permite.
- ¿Se puede convertir un archivo HTML con tablas de datos complejas?
- Sí. Las tablas HTML se convierten correctamente a PDF manteniendo la estructura de filas y columnas, los colores de fondo de cabecera y los bordes. Para tablas muy anchas que exceden el ancho de la página PDF, puede ser necesario ajustar el CSS para reducir el tamaño de la fuente o usar la propiedad overflow: visible en la tabla.
- ¿Puedo usar flexbox o CSS Grid en el HTML que voy a convertir?
- Los layouts modernos de flexbox y CSS Grid son compatibles con la mayoría de motores de conversión HTML a PDF modernos. Sin embargo, algunos comportamientos complejos de alineación y distribución pueden diferir ligeramente del renderizado en navegador. Se recomienda revisar la vista previa del PDF con atención si se usan layouts de columnas complejas.