Conversor gratuito de HTML a PDF

Acerca de la conversión HTML → PDF

PDF comenzó como el proyecto «Camelot» de John Warnock en Adobe en 1991, una propuesta interna para crear un «formato de archivo común que pudiera capturar documentos desde cualquier aplicación, enviar versiones electrónicas de estos documentos a cualquier lugar y visualizarlos e imprimirlos en cualquier máquina». Warnock fue cofundador de Adobe e inventor (con Charles Geschke) de PostScript; el objetivo de Camelot era llevarse las garantías de fidelidad de impresión de PostScript y hacer que funcionaran tanto en pantalla como en papel. Acrobat 1.0 y PDF 1.0 se lanzaron en junio de 1993, con el primer lector Acrobat comercial a 50 $. PDF fue un formato propietario controlado por Adobe durante quince años; Adobe liberó la spec a ISO en 2008 como ISO 32000-1:2008 (PDF 1.7 publicado como estándar abierto); el mayor PDF 2.0 (ISO 32000-2) llegó en 2017 con revisiones hasta 2020. Adobe renunció a sus derechos de patente restantes en abril de 2023, haciendo PDF totalmente libre de patentes en el mundo. PDF es ahora el formato universal de documento portable, cada sistema operativo lo lee nativamente, cada impresora lo entiende, cada sistema legal lo acepta. Todo el edificio descansa sobre la maquetación de posición fija al estilo PostScript: cada elemento en una página PDF tiene una posición absoluta (x, y), alineada a la línea base del sistema de coordenadas de la página, con texto codificado como referencias a fuente + glifos y gráficos como comandos de ruta.

El desajuste básico entre HTML y PDF es lo que hace que la conversión HTML-a-PDF sea más difícil de lo que parece. HTML está basado en reflow, el contenido se adapta al viewport, los párrafos se reformatean al redimensionar, la maquetación cambia cuando el usuario hace zoom. PDF es de maquetación fija, cada elemento está posicionado absolutamente, los límites de página son explícitos, no ocurre reflow nunca. Convertir de uno al otro fuerza una serie de decisiones difíciles: cómo cortar páginas largas, dónde viven las fuentes integradas en el PDF resultante, cómo se preservan los gráficos vectoriales, si los enlaces siguen siendo clicables. No hay una respuesta objetivamente correcta para la mayoría de estas, el comportamiento correcto depende del caso de uso.

Dos enfoques JavaScript: raster vs vector

La conversión HTML-a-PDF basada en navegador tiene dos arquitecturas. html2pdf.js (Erik Koopmans, usado por esta herramienta) envuelve dos bibliotecas subyacentes, html2canvas (que renderiza un elemento HTML a una imagen canvas leyendo la maquetación desde el DOM y redibujándola) y jsPDF (que construye un PDF a partir de primitivas). El pipeline: HTML → imagen canvas → imagen incrustada en PDF. El resultado es preciso a pixel, lo que ves en la vista previa es lo que obtienes en el PDF, pero solo raster: el texto en el PDF es una imagen, no texto seleccionable. No puedes buscar palabras dentro del PDF, no puedes copiar y pegar de él, los lectores de pantalla no pueden leerlo. Para informes, certificados, facturas y documentos puntuales esto es aceptable; para documentos donde el texto necesita ser buscable o accesible, esto es una limitación significativa. La arquitectura alternativa usa jsPDF directamente con primitivas de renderizado de texto (doc.text(), doc.line(), doc.image()), construyendo el PDF desde cero con texto seleccionable y gráficos vectoriales. Esto requiere escribir código convertidor para cada elemento HTML que quieras soportar, pero produce un PDF «de verdad» que es buscable y accesible. El compromiso: html2pdf.js es una línea de código; el enfoque jsPDF-directo es un proyecto de ingeniería sustancial. Esta herramienta prioriza facilidad de uso (html2pdf.js) sobre seleccionabilidad de texto, sé consciente del compromiso al decidir si la salida cumple tus necesidades.

Alternativas del lado servidor, cuando el lado navegador no es suficiente

wkhtmltopdf fue la herramienta de línea de comandos HTML-a-PDF open-source de larga data, un renderer basado en WebKit que convertía HTML a PDF en el servidor. Usado en incontables pipelines CI, aplicaciones empresariales y servicios de generación PDF. El proyecto wkhtmltopdf fue archivado en 2023 (el repositorio GitHub está ahora en solo lectura); no debería ser la recomendación para aplicaciones nuevas, aunque miles de millones de PDFs existentes se generaron con él. Puppeteer (Google, Chrome headless desde 2017) es el estándar industrial moderno para HTML-a-PDF del lado servidor. El page.pdf() de Puppeteer usa el pipeline completo de generación PDF de Chromium, texto seleccionable, fuentes integradas, gráficos vectoriales, hipervínculos todos funcionan correctamente porque Chromium tiene un backend PDF real. Playwright (Microsoft, 2020) es el equivalente cross-browser (Chromium, Firefox, WebKit) con la misma capacidad de generación PDF. Prince (comercial, 495 $/servidor) es la mejor implementación de CSS Paged Media, soporta maquetaciones multi-columna, encabezados/pies de página corrientes, páginas nombradas, notas al pie, características OpenType. WeasyPrint (open source, Python) es la alternativa cross-plataforma con características similares. Paged.js es un polyfill que trae las características de CSS Paged Media a la generación PDF basada en navegador. El «Guardar como PDF» integrado del navegador (Archivo → Imprimir → Guardar como PDF) es la opción más barata de todas, es gratis, ya instalado, soporta CSS Paged Media razonablemente bien y produce salida PDF con texto seleccionable. Para conversiones puntuales, esta es a menudo la respuesta correcta en lugar de una herramienta de terceros.

CSS Paged Media, cómo funciona realmente la impresión-desde-CSS

El CSS Paged Media Module del W3C define un conjunto de características CSS específicamente para salida paginada: reglas @page para controlar tamaño de página, márgenes y orientación; @page :left / @page :right para márgenes asimétricos en páginas izquierda y derecha de un libro; @page :first para manejo especial de la primera página; margin boxes (@top-center, @bottom-right, etc.) para encabezados y pies de página corrientes; page-break-before / page-break-after / page-break-inside para controlar dónde se cortan las páginas (con la sintaxis moderna break-before: page / break-after: page / break-inside: avoid); orphans y widows para el control de cortes de párrafo. Los navegadores implementan varios subconjuntos de CSS Paged Media en su pipeline de impresión. Prince y WeasyPrint implementan la spec completa; el page.pdf() de Chrome cubre la mayoría; html2pdf.js (esta herramienta) soporta reglas page-break-* básicas pero salta las características más elaboradas de margin-box y páginas nombradas. Para documentos que necesitan maquetación de calidad libro (páginas de título, inicios de capítulo, encabezados corrientes, notas al pie), usa Prince o WeasyPrint; para el caso típico «guarda este informe como PDF», html2pdf.js es suficiente.

Casos de uso habituales:

• Facturas y recibos. El caso de negocio más común, una plantilla HTML estructurada poblada con datos de pedido, exportada como PDF para envío por correo o archivado. La limitación texto-no-seleccionable raramente importa porque el destinatario no necesita buscar en el contenido de una sola factura.
• Informes y documentos. Informes empresariales trimestrales, entregables de proyecto, documentos de estado internos, generados desde un sistema de plantillas, exportados como PDF para distribución.
• Certificados. Certificados de finalización de curso, certificados de asistencia a conferencias, insignias de logros, típicamente una sola página con estilo HTML/CSS, exportada como PDF puntual.
• Currículums y CVs. Candidatos construyendo su currículum en una plantilla web (export de Notion, constructor personalizado) y exportándolo como PDF para envío. La seleccionabilidad del texto importa aquí porque el software de contratación (ATS) a menudo hace extracción de palabras clave desde PDFs de currículum.
• Boletos y confirmaciones. Boletos de concierto, pases de embarque de vuelo, confirmaciones de hotel, exportados desde flujos web de reserva para almacenamiento offline o impresión.
• Archivado de contenido web. Guardar un artículo, post de blog o página de documentación como PDF de formato fijo para referencia offline o almacenamiento a largo plazo.
• Email-a-PDF. Convertir correos HTML (newsletters, anuncios) a PDF para reenvío o archivos de cumplimiento.

Alcance honesto: qué hace y qué no hace esta herramienta

Esta herramienta usa html2pdf.js v0.10.1 (el build empaquetado con html2canvas + jsPDF) para renderizar HTML en tu navegador y producir una descarga PDF. El PDF resultante es preciso a pixel respecto a la vista previa, lo que ves es lo que obtienes, pero el texto se renderiza como imagen raster, no texto seleccionable. Soporta tamaños de página A4, Letter, A3 y A5, orientaciones retrato y paisaje, márgenes configurables, nombre de archivo personalizado y reglas CSS page-break-* básicas para control de corte de página. Lo que esta herramienta no hace, y donde deberías acudir a una alternativa: texto seleccionable / buscable en el PDF (usa Puppeteer del lado servidor, o «Guardar como PDF» del navegador); maquetación de calidad libro con encabezados corrientes, pies de página, páginas nombradas, notas al pie (usa Prince o WeasyPrint del lado servidor); ejecución JavaScript en el HTML renderizado (el convertidor pasa el HTML por html2canvas que no ejecuta scripts dentro del contenido renderizado); contenido animado (PDF es estático); media queries que dependen de contextos de impresión (el renderizado ocurre en contexto pantalla). Para las necesidades cotidianas «haz un PDF desde este HTML», html2pdf.js es suficientemente bueno; para pipelines de calidad producción que necesitan texto PDF real y salida accesible, Puppeteer del lado servidor es el estándar moderno.

Privacidad: por qué importa el solo-navegador aquí

La generación PDF es un negocio cloud-SaaS común, servicios como DocRaptor, PDFShift, PDFCrowd, API2PDF cobran por PDF generado, normalmente porque están corriendo Puppeteer headless en una granja de servidores y absorbiendo el coste del renderizado acelerado por GPU. El compromiso es que el HTML que envías a esos servicios se procesa en su infraestructura: facturas contienen información de cliente, informes contienen datos de negocio, certificados contienen nombres personales, currículums contienen todo. Lo que sea que generes, el servicio tercero lo ve. Esta herramienta corre enteramente en tu navegador vía html2pdf.js, verifícalo en la pestaña Network de DevTools al pulsar Generar (la única petición saliente es para obtener la biblioteca html2pdf.js del CDN; una vez cargada, no más peticiones). Pon la página offline (modo avión) tras cargar la biblioteca y el convertidor sigue funcionando. Seguro para HTML conteniendo nombres de cliente, datos financieros, plantillas internas o cualquier contenido que no quieras ver copiado en el disco duro de un desconocido.

Preguntas frecuentes

¿Qué funcionalidades HTML/CSS se admiten?

html2pdf admite el HTML y el CSS estándar, incluidos diseños, fuentes, colores, imágenes y tablas. Las funcionalidades avanzadas (animaciones, JavaScript, media queries) están limitadas. Para mejores resultados, usa CSS en línea o etiquetas <style> en lugar de hojas externas.

¿Cómo incluir imágenes en mi HTML?

Usa URI de datos para las imágenes o asegúrate de que las URL de imágenes externas sean accesibles y compatibles con CORS. Las imágenes codificadas en Base64 funcionan de forma fiable. Ejemplo: <img src="data:image/png;base64,…" />

¿Por qué el texto no es seleccionable en el PDF?

Porque html2pdf.js renderiza el HTML a una imagen canvas primero, luego incrusta la imagen en el PDF. El «texto» del PDF es en realidad una imagen raster del texto, no glifos de texto reales. Este es el compromiso por la fidelidad visual: el PDF se ve exactamente como la vista previa del navegador, pero no puedes buscar, copiar ni usar un lector de pantalla sobre él. Para texto PDF realmente seleccionable, las alternativas son: usar el «Guardar como PDF» integrado del navegador (Archivo → Imprimir → Guardar como PDF, produce texto seleccionable y es gratis); usar una herramienta del lado servidor como el page.pdf() de Puppeteer que tiene el pipeline completo de generación PDF de Chromium; o escribir JavaScript que llame a las primitivas doc.text() de jsPDF directamente (sustancialmente más trabajo).

¿Por qué mi vista previa difiere del PDF?

La vista previa muestra el renderizado de tu HTML en el navegador. Algunas funciones CSS se muestran de forma distinta en PDF. Prueba los diseños complejos antes de generar el PDF final y ajusta los márgenes o los tamaños de fuente si es necesario.

¿Puedo añadir saltos de página en mi HTML?

Sí, usa los saltos de página CSS: añade page-break-before: always; o page-break-after: always; a cualquier elemento. En CSS3, usa break-before: page; o break-after: page; para mejor compatibilidad.

¿Mi HTML se sube a un servidor?

No. El HTML que pegas y el PDF generado ambos se quedan en tu navegador. La única petición de red es para la propia biblioteca html2pdf.js cargada desde un CDN público al cargar la página; una vez cargada, no más peticiones salientes. Verifícalo en la pestaña Network de DevTools al pulsar Generar, o pon la página offline (modo avión) tras cargar la biblioteca y el convertidor sigue funcionando. Seguro para HTML conteniendo datos de cliente, detalles financieros, plantillas de negocio internas, o cualquier contenido que no quieras que un servicio PDF tercero vea.