Por qué convertir HTML a PDF
Para imprimir, archivar o compartir sin conexión el contenido de una página web, lo más cómodo es convertirlo a PDF. HTML a PDF transforma una página web dinámica en un documento fijo.
Situaciones comunes:
- Guardar artículos web
- Generar facturas/recibos en línea
- Exportar informes
- Crear libros electrónicos
Métodos de HTML a PDF
Impresión del navegador
El método más sencillo: en el navegador, Ctrl+P y elige "Guardar como PDF" como destino. El motor de renderizado del navegador convierte la página web directamente a PDF.
Ventajas: gratis, buen soporte de CSS. Desventajas: operación manual, no apto para lotes; los elementos interactivos de la página pueden interferir.
Herramienta en línea
Usa la herramienta HTML a PDF:
- Introduce la URL de la página web o pega el HTML
- La herramienta renderiza y convierte
- Descarga el PDF
Se procesa en el navegador; el contenido no se sube.
Librerías de programación
En entornos de desarrollo, usa librerías:
- JavaScript: Puppeteer (Chrome headless), jsPDF
- Python: pdfkit, WeasyPrint
- Servidor: wkhtmltopdf
Tratamiento de estilos CSS
Nivel de soporte CSS
Los distintos motores de conversión soportan CSS de forma diferente:
- Motor de navegador (Chrome): soporte más completo, flex y grid funcionan
- wkhtmltopdf: basado en WebKit antiguo, no soporta CSS nuevo
- WeasyPrint: soporta la mayoría de CSS 2.1, parte de CSS 3
Antes de convertir a PDF, confirma qué características CSS soporta el motor.
CSS específico para impresión
Usa @media print para escribir estilos de impresión:
@media print {
.no-print { display: none; } /* Ocultar elementos que no se imprimen */
body { font-size: 12pt; } /* Usar pt, no px, para impresión */
a { text-decoration: none; } /* Quitar el subrayado de los enlaces */
}
Ocultar elementos interactivos
La navegación, los botones y la publicidad de una página web no tienen sentido en PDF. Escóndelos con @media print:
@media print {
nav, footer, .ad, .sidebar { display: none; }
}
Tratamiento de color
- La pantalla usa RGB; la impresión PDF usa CMYK
- El color de fondo no se imprime por defecto; para forzarlo, usa
-webkit-print-color-adjust: exact - Los fondos oscuros consumen mucha tinta en PDF; valora cambiar a colores claros
Control de saltos de página
Saltos de página
Controla los saltos con CSS:
h1 { page-break-before: always; } /* Salto de página antes del título */
table { page-break-inside: avoid; } /* Evitar que la tabla se corte */
img { page-break-inside: avoid; } /* Evitar que la imagen se corte */
Propiedades de salto de página
page-break-before: salto de página antes del elementopage-break-after: salto de página después del elementopage-break-inside: sin salto dentro del elemento
Evitar líneas viudas y huérfanas
p { orphans: 3; widows: 3; } /* Al menos 3 líneas al final/inicio del párrafo */
Encabezados y pies de página
Impresión del navegador
En el diálogo de impresión del navegador puedes configurar encabezados y pies (número de página, título, URL). Pero el estilo es limitado.
Generación con librerías
Librerías como Puppeteer permiten personalizar encabezados y pies:
const pdf = await page.pdf({
displayHeaderFooter: true,
headerTemplate: '<div style="font-size:9pt;">Título del informe</div>',
footerTemplate: '<div>Página <span class="pageNumber"></span></div>',
margin: { top: '60px', bottom: '60px' }
});
Tratamiento de imágenes
Ruta de imagen
En HTML, usa rutas absolutas o base64 para las imágenes:
- Ruta absoluta:
<img src="https://example.com/img.png"> - base64:
<img src="data:image/png;base64,..."> - Ruta relativa: puede no encontrarse al convertir a PDF; usa ruta absoluta o base64
Incrustación base64
Para imágenes pequeñas, incrustalas en base64 para evitar problemas de ruta:
<img src="data:image/png;base64,iVBORw0KGgo...">
Las imágenes grandes en base64 aumentan el tamaño del HTML; valora su uso.
Nitidez de imagen
- Usa imágenes de alta resolución
- No las amplíes por encima del tamaño original
- Las imágenes vectoriales (SVG) son las más nítidas al convertir a PDF
Tratamiento de fuentes
Carga de fuentes
Las páginas web usan Web Fonts (Google Fonts, etc.); al convertir a PDF, las fuentes deben terminar de cargar. Con librerías, asegúrate de que la carga se completa antes de convertir.
Incrustación de fuentes
PDF debe incrustar las fuentes para verse igual en cualquier dispositivo. Las herramientas de conversión suelen incrustarlas automáticamente.
Fuentes comunes
Usa fuentes comunes (Arial, Times New Roman, SimSun, etc.) para evitar problemas de fuente.
Convertir con DocsAll
- Introduce la URL de la página web o pega el código HTML
- La herramienta renderiza la página web
- Convierte a PDF
- Descarga
Se procesa en el navegador; el contenido no se sube al servidor.
Preguntas frecuentes
Pérdida de estilos
- CSS no cargado (ruta de CSS externo incorrecta)
- Se usan características CSS no soportadas por el motor
- Solución: usar CSS en línea, usar características CSS soportadas
El salto de página corta el contenido
- No se configuró el control de saltos
- Solución: añadir page-break-inside: avoid
Las imágenes no se muestran
- Ruta incorrecta
- Restricción de dominio cruzado
- Solución: usar ruta absoluta o base64
Caracteres corruptos en chino
- La fuente no soporta chino
- La codificación no es UTF-8
- Solución: usar una fuente que soporte chino, declarar codificación UTF-8 en HTML
No se imprime el color de fondo
- El navegador no imprime fondos por defecto
- Solución: establecer
-webkit-print-color-adjust: exacten CSS, o marcar "Gráficos de fondo" en el diálogo de impresión
La página es demasiado ancha
- El ancho de la página web supera la página PDF
- Solución: ajustar el ancho en CSS, o cambiar a papel horizontal
Resumen
La clave de HTML a PDF es el tratamiento de estilos CSS y el control de saltos de página. Usa @media print para escribir estilos de impresión y ocultar elementos interactivos. Controla los saltos con las propiedades page-break. Usa rutas absolutas o base64 para las imágenes. La herramienta HTML a PDF de DocsAll se ejecuta en el navegador y el contenido no se transmite al exterior.