Guía de HTML a PDF y generador de CSS de impresión
Cómo convertir HTML a PDF: CSS de impresión, window.print() | We.Inc
Convierte HTML en un PDF limpio: guárdalo desde el diálogo de impresión, escribe CSS de impresión con @page y break-inside, invoca window.print() o renderízalo en un servidor. Con un generador de CSS de impresión.
La forma más rápida de convertir una página web en PDF es el propio diálogo de impresión del navegador: ábrelo, elige el destino PDF y guarda. Para controlar el aspecto de ese PDF, añade CSS de impresión con @media print y @page para el tamaño de papel y los márgenes. Para PDFs generados automáticamente, renderiza la página con un navegador headless como Puppeteer o Playwright.
Formas de crear un PDF a partir de HTML
Método
Dónde se ejecuta
Texto seleccionable
Ideal para
Diálogo de impresión, guardar como PDF
Cualquier navegador de escritorio
Sí
Copias puntuales de una página
Botón window.print()
El navegador del visitante
Sí
Facturas, recibos, entradas
Puppeteer page.pdf()
Node.js controlando Chrome
Sí
Informes automáticos en un servidor
Playwright page.pdf()
Un script de Playwright controlando un navegador
Sí
PDFs automáticos dentro de una configuración de tests existente
El navegador del visitante
No, la página se convierte en una imagen
Descargas rápidas en el cliente
jsPDF
El navegador del visitante
Sí, para el texto que dibujas
Crear un PDF a partir de datos en código
Todos los métodos de esta página acaban pidiendo a un motor de navegador que maquete la página sobre papel, así que un buen CSS de impresión los mejora todos. Crea abajo una hoja de estilos de impresión inicial y luego elige la vía de conversión según quién pulse el botón: una persona, tu página o un servidor.
Elige un tamaño de papel, una orientación y un margen para la regla @page.
Marca los extras que necesites: ocultar la navegación, mantener bloques juntos, imprimir las direcciones de los enlaces, conservar los colores de fondo.
Copia el CSS en tu hoja de estilos; solo se aplica al imprimir.
Abre la vista previa de impresión del navegador y elige el destino PDF para revisar el resultado.
Usa la vista previa de impresión como banco de pruebas. Se actualiza con cada cambio de CSS y no cuesta nada.
Oculta en la impresión la navegación, los avisos de cookies y las barras laterales; nadie puede hacer clic en ellos sobre papel.
Mantén enteros las tablas, las figuras y los bloques de código con break-inside: avoid.
Los navegadores quitan los colores de fondo al imprimir por defecto. print-color-adjust: exact les pide que conserven los tuyos, pero los ajustes de impresión del visitante siguen mandando.
Usa pt, mm o in para los tamaños de impresión cuando necesites medidas físicas exactas.
Preguntas frecuentes
¿Cómo guardo una página web como PDF sin ninguna herramienta?
Abre el diálogo de impresión del navegador desde su menú o con el atajo de teclado y elige la opción PDF en la lista de destinos o impresoras. El nombre exacto depende del navegador y del sistema operativo.
¿Cómo añado un botón Descargar PDF a mi página?
La versión honesta más sencilla es un botón que invoca window.print(), que abre el mismo diálogo, donde el visitante puede guardar como PDF. No necesita ninguna librería, mantiene el texto seleccionable y usa tu CSS de impresión.
¿Cómo evito que una tabla se parta entre dos páginas?
Añade break-inside: avoid a la tabla, o a sus filas si la tabla es larga. El antiguo page-break-inside: avoid se trata como un alias, así que sigue funcionando en hojas de estilos antiguas.
¿Puedo definir el tamaño de papel desde CSS?
Sí. @page { size: A4 portrait; margin: 15mm; } define el tamaño y los márgenes de la caja de página. Puppeteer solo lo usa cuando preferCSSPageSize es true; si no, decide su propia opción format, que por defecto es Letter.
¿Por qué html2pdf.js genera PDFs borrosos o enormes?
Su README explica que renderiza el contenido como una imagen y coloca esa imagen en el PDF, así que el texto no se puede seleccionar ni buscar y los archivos crecen mucho. Usa la impresión o un navegador headless cuando el texto importa.
El CSS de impresión es la base
Un bloque @media print te permite rediseñar la página para papel sin tocar el diseño de pantalla. Oculta lo que no tiene sentido en papel, ensancha la columna de contenido y define un tamaño de letra legible.
La regla @page controla la propia caja de página: tamaño, márgenes y orientación, con :first, :left y :right para tratar páginas concretas de otra forma. MDN indica @page como Baseline recién disponible desde diciembre de 2024, con algunas partes que todavía varían entre navegadores.
Cuándo renderizar en un servidor
Si los PDFs deben generarse sin una persona, como un informe nocturno o una factura enviada por email, ejecuta un navegador headless. page.pdf() de Puppeteer imprime con el tipo de medio print, acepta opciones como format, margin y printBackground, y puede guardar directamente en una ruta de archivo.
Renderizar en servidor da el mismo resultado cada vez porque controlas la versión del navegador y las fuentes. También implica ejecutar y proteger ese navegador, así que asúmelo solo cuando un botón de impresión no sea suficiente.
Referencia de CSS de impresión
Reglas y propiedades que dan forma a las páginas impresas
CSS
Valores
Uso
@media print { }
Cualquier regla
Estilos que solo se aplican al imprimir o guardar en PDF
@page { size }
A5, A4, A3, B5, B4, letter, legal, ledger o longitudes; portrait o landscape
Tamaño y orientación del papel
@page { margin }
Longitudes
Márgenes de cada página
@page :first
Pseudoclase
Márgenes distintos en la primera página
auto, avoid, avoid-page, avoid-column
Mantener un bloque en una sola página
break-before / break-after
auto, avoid, page, left, right
Forzar o evitar un salto en un bloque
economy, exact
Si el navegador puede quitar colores y fondos
Ejemplos de impresión para copiar
Un botón de imprimir o guardar como PDF
window.print() abre el diálogo de impresión y bloquea la página hasta que se cierra. La clase deja el propio botón fuera del papel.
Diseño de facturas que empieza cada factura en una página nueva
break-after: page después de cada factura da una factura por hoja cuando se imprimen varias juntas.
Preparar la página justo antes de imprimir
beforeprint y afterprint se disparan alrededor del diálogo, lo que sirve para desplegar secciones contraídas.
PDF en servidor con Puppeteer
preferCSSPageSize hace que tu tamaño de @page gane a la opción format; printBackground conserva los fondos.
Generador de CSS de impresión
Tamaño de papel
Orientación
Vertical
Horizontal
Margen: {n} mm
Ocultar navegación, pie de página y barras laterales
Mantener tablas, figuras y código en una página
Imprimir la dirección de cada enlace después del enlace