Cómo convertir HTML a PDF
Crear PDF desde HTML es útil para generar facturas, informes, cartas, certificados — cualquier documento en el que quieras controlar el diseño con CSS pero distribuirlo como PDF.
Cómo convertir HTML a PDF
- Pega tu HTML — introduce tu código HTML, incluido CSS en línea o etiquetas
<style>, en el editor. El código puede incluir la estructura completa de página con encabezados, tablas, imágenes y estilos. - Previsualiza el resultado — una vista previa en directo muestra exactamente cómo se renderizará tu PDF a medida que escribes. Ajusta HTML y CSS hasta que el resultado se corresponda con lo que esperas.
- Genera y descarga — haz clic en el botón de generación para crear el PDF en tu navegador y luego descárgalo al instante.
Lo que puedes crear
- Facturas y recibos — tablas estructuradas con identidad de empresa, líneas de artículos y totales
- Informes — documentos formateados con títulos, párrafos, gráficos y tablas de datos
- Certificados — diseños estilizados con fuentes personalizadas, bordes y texto centrado
- Cartas — correspondencia profesional con encabezado, cuerpo y zona de firma
- CV — diseños cuidados exportados como PDF limpio para tus candidaturas
Consejos de estilo para la salida PDF
Usa estilos en línea o etiquetas <style> — las hojas de estilo externas no se cargan. Coloca todo tu CSS o bien en línea sobre los elementos, o bien en un bloque <style> dentro del HTML.
Define los márgenes de página — usa @page { margin: 20mm; } en CSS para controlar el espacio alrededor de tu contenido en el PDF.
Usa unidades adecuadas para imprimir — mm, cm y pt son más predecibles en los PDF que px o rem. Usa mm para los márgenes y espaciados que deban corresponder a dimensiones físicas.
Evita los diseños dependientes de la ventana — los anchos en porcentaje y los anchos en píxeles fijos funcionan mejor. Las unidades ligadas a la ventana (vw, vh) pueden no comportarse como esperas en el PDF.
Consejos
- Previsualiza primero — comprueba siempre la vista previa en directo antes de generar. Es mucho más rápido iterar sobre el HTML que regenerar un PDF cada vez.
- Usa base64 para las imágenes — convierte las imágenes en Data URI base64 para garantizar su inclusión en el PDF. Las URL externas pueden fallar por las restricciones CORS.
- Mantén la simplicidad — los diseños CSS complejos (grids anidados, elementos posicionados superpuestos) pueden no renderizarse perfectamente. Los diseños más simples producen PDF más fiables.
- Prueba los saltos de página — para documentos de varias páginas, usa
page-break-before: alwayspara controlar dónde empiezan las nuevas páginas.
Preguntas frecuentes
¿El PDF preserva mi estilo CSS?
Sí. El convertidor renderiza tu HTML con el CSS aplicado, incluidos colores, fuentes, márgenes y diseño. El PDF se parece a la página web renderizada, no al código fuente en bruto.
¿Puedo incluir imágenes en el PDF?
Sí. Usa imágenes en base64 (Data URI) para obtener los resultados más fiables. Las URL de imágenes externas pueden funcionar si son accesibles y compatibles con CORS.
¿Se envía mi HTML a un servidor?
No. La conversión se realiza íntegramente en tu navegador. Tu código y el PDF generado nunca salen de tu dispositivo.
¿Qué funcionalidades CSS se admiten?
El CSS estándar, incluidos diseños, colores, fuentes, fondos, bordes y tablas, está bien admitido. Las funciones avanzadas como CSS Grid, animaciones complejas y ciertos casos límite de Flexbox pueden estar limitados.