Qué hace el Convertidor HTML a PDF
El Convertidor HTML a PDF toma cualquier HTML que tengas — marcado pegado, un archivo .html subido o una URL pública — y lo convierte en un PDF descargable. La página se renderiza en un canvas fuera de pantalla con html2canvas, se trocea en páginas de PDF con jsPDF y se te entrega como un único archivo. Elige A4 o Letter, vertical u horizontal y un margen. Todo pasa en tu navegador. Nada se sube.
Sé honesto sobre el trato. html2canvas reimplementa un subconjunto de CSS en JavaScript — lee los estilos computados del DOM y los pinta en un canvas. Acierta en lo común: colores, fuentes, padding, bordes, fondos, posicionamiento simple, flexbox básico. Tiene problemas en casos límite: layouts de grid complicados, subgrid, alineación por línea base, gaps en porcentaje dentro de contenedores flex, ciertos cálculos de layout con propiedades personalizadas. Para salida pixel-perfect, Imprimir → Guardar como PDF de tu propio navegador gana — usa el motor de renderizado real. Nuestra herramienta es para el caso donde tienes HTML en bruto en la mano y quieres un PDF sin abrir una pestaña del navegador primero.
Cómo usarlo
El widget tiene tres modos de entrada. Elige el que coincida con tu situación.
- Elige un modo. Pegar HTML funciona para cualquier marcado que ya tengas. Subir .html acepta un archivo local. Desde URL trae una página pública (la mayoría fallarán por CORS — ver más abajo).
- Define el tamaño de página (A4 o Letter), la orientación (vertical u horizontal) y el margen (0, 10, 20 o 40 mm). Por defecto: A4 / vertical / 20 mm.
- Pulsa Convertir a PDF. El HTML se renderiza en un div oculto, html2canvas lo captura a escala 2× para nitidez y jsPDF trocea el resultado en tantas páginas como sean necesarias.
- Pulsa Descargar. El nombre de archivo de salida se deriva del origen: HTML pegado →
pagina.pdf, archivo subido → refleja el nombre de archivo, URL → derivado del hostname (example.com→example-com.pdf).
Nada de tu HTML llega a un servidor que controlemos. El modo Pegar y el modo Subir son enteramente locales — abre la pestaña de red del navegador durante la conversión y verás cero peticiones salientes. El modo URL hace exactamente una petición: tu navegador trae la URL que escribiste, y la respuesta se queda en memoria del navegador.
Los tres modos de entrada y cuándo usar cada uno
Cada modo resuelve un problema distinto. Elegir el correcto desde el inicio ahorra tiempo.
| Modo | Qué acepta | Funciona en | Mejor para |
|---|---|---|---|
| Pegar HTML | Cualquier marcado en el textarea | Todo (el marcado ya es local) | Plantillas de correo, fragmentos de CMS, informes exportados, cualquier cosa que puedas copiar-pegar |
| Subir .html | Un archivo .html local | Todo (el archivo ya es local) | Informes HTML autónomos, facturas generadas, notebooks exportados |
| Desde URL | Una URL pública con CORS permisivo | Aproximadamente el 5% de las URL públicas (endpoints con CORS permitido, entornos de desarrollo, tus propios sitios) | Fetches rápidos de APIs que devuelven HTML, tus propios sitios donde controlas las cabeceras |
Si probaste el modo URL y obtuviste un error, te topaste con Cross-Origin Resource Sharing — una característica de seguridad del navegador, no un bug que podamos parchear. El workaround es universal: abre la URL en una pestaña normal, clic derecho → Ver código fuente de la página (o DevTools → Elementos → Copiar outerHTML en la etiqueta <html> si la página se renderiza con JS), y pega eso en el modo Pegar HTML. El HTML ahora es local, CORS ya no aplica, y la conversión corre.
Un ejemplo trabajado con números reales
Supón que tienes una plantilla de email HTML — un anuncio de marketing, 1.200 palabras de cuerpo, dos imágenes de cabecera, un botón CTA, pie con enlaces sociales. Unos 18 KB de HTML y 240 KB de imágenes inline, todo en un archivo .html con un único bloque <style> arriba.
A A4 / vertical / margen de 20mm: la conversión tarda 2,5 segundos. La salida es de 1,3 MB en 3 páginas. La imagen hero es nítida, la tipografía del cuerpo se lee limpia, el botón CTA mantiene su forma y color, los logos del pie renderizan al tamaño correcto. La única diferencia visible respecto al origen: el estado hover en el CTA no se captura (estamos renderizando el DOM en reposo, sin simulación de hover) y el flex-wrap del pie puso un icono en una segunda fila porque html2canvas midió el gap de flex ligeramente distinto a un navegador real.
A A4 / horizontal / margen de 10mm: mismo contenido, 2 páginas en lugar de 3, anchos de línea ligeramente mayores. 1,1 MB. Letter / vertical / margen de 20mm: 3 páginas, 1,3 MB, las líneas envuelven en los mismos límites de palabra que A4 porque la columna es casi del mismo ancho.
Ahora invierte la entrada: un dashboard single-page-app renderizado con React, servido desde localhost:3000. El modo URL trae el HTML de arranque y omite cada componente que React debía montar — obtienes un PDF en blanco con el spinner de carga. La jugada correcta: abre la app en una pestaña, déjala renderizar, copia outerHTML del DOM renderizado, pégalo en modo Pegar HTML. El PDF ahora coincide con lo que estaba en pantalla.
Cómo se compara esto con Adobe Acrobat, SmallPDF, iLovePDF
Los servicios grandes de HTML-a-PDF — la versión web de Adobe Acrobat, URL-a-PDF de SmallPDF, HTML-a-PDF de iLovePDF, PDFCrowd, DocRaptor — todos corren del lado del servidor, que es la arquitectura correcta para fidelidad pero la incorrecta para privacidad y velocidad.
Esos servicios suelen manejar una instancia de Chromium headless en su servidor. Les das una URL o HTML; arrancan un navegador, navegan a tu contenido, ejecutan el JS, esperan a que las fuentes e imágenes carguen, después golpean la API de impresión de Chrome. La salida es pixel-perfect porque salió de un navegador real. Las desventajas: tu HTML y cualquier dato dentro viaja a su infraestructura y se asienta en sus registros; esperas en cola con los trabajos de renderizado de todos los demás; suele haber una cuota diaria gratis y un nivel de pago que empieza en $9-15/mes; y la mayoría requiere una cuenta antes del segundo archivo.
Nosotros hacemos menos, en tu navegador, gratis. El trato es honesto: el CSS complejo puede renderizar imperfectamente, JS no se ejecutará (no ejecutamos scripts en el contenedor de renderizado fuera de pantalla), las fuentes web que necesitan un fetch con CORS permitido pueden caer a las por defecto, y las páginas muy largas pueden producir salida grande. Para una plantilla de correo, un informe exportado, una vista previa de CMS o una factura generada — trabajos comunes de HTML a PDF — nuestra herramienta es la elección correcta. Para un sitio de marketing pulido que quieres archivar bit a bit, usa Imprimir → Guardar como PDF de Chrome, o uno de los servicios del lado del servidor si scriptearlo vale el coste.
Qué puede y qué no puede html2canvas
html2canvas es el motor que hace el trabajo visual, y conocer sus límites ahorra dolores de cabeza.
Funciona bien:
- Propiedades CSS estándar. Color, fondo, fuente, padding, margin, borde, border-radius, box-shadow, opacidad — todo renderiza igual que en un navegador real.
- Estilos inline y etiquetas <style> del mismo documento. Si tu CSS está dentro del HTML que pegas, funciona. Siempre integra tu CSS en un único bloque <style> arriba para mejores resultados.
- Flexbox básico. Layouts de fila y columna, alineación simple, gap, justify-content y align-items básicos — bien para la gran mayoría de layouts.
- Imágenes inline y de bloque. Los JPEG y PNG incrustados en el HTML o referenciados por URL absoluta desde servidores con CORS permitido renderizan correctamente.
Funciona imperfectamente:
- CSS Grid. Las cuadrículas simples con tracks explícitos suelen renderizar. Auto-placement, subgrid, áreas con nombre y grid-template-areas a menudo no.
- Propiedades personalizadas (variables CSS). Honradas cuando la propiedad se lee directamente, pero algunas cadenas de valor computado se rompen.
- Casos límite de flexbox. flex-wrap con hijos de altura mixta, alineación por línea base, gaps en porcentaje, items con flex-basis: 0% — estos a veces se distribuyen con dimensiones ligeramente incorrectas.
- Web fonts cargadas desde dominios externos. Si las cabeceras CORS de la fuente permiten lecturas cross-origin, renderiza; si no, caemos a un serif del sistema.
No funciona:
- JavaScript. No ejecutamos scripts en el contenedor de renderizado. Si tu HTML depende de JS para inyectar contenido (gráficos, SPAs, cualquier cosa dinámica), captura primero el DOM renderizado en DevTools y pega eso.
- iframes. El contenido de un iframe vive en un contexto de documento distinto que html2canvas no puede leer.
- :hover, :focus, :active. El DOM se captura en reposo. Los efectos hover no se simulan.
- Animaciones. Se captura un único frame. Las transiciones CSS y animaciones por keyframe no aparecen.
Cuándo Imprimir → Guardar como PDF del navegador es la respuesta correcta
Chrome, Firefox, Safari y Edge tienen una opción incorporada Guardar como PDF en el diálogo de impresión. Usa el motor de renderizado real del navegador (Blink, Gecko, WebKit), lo que significa fidelidad perfecta en grid, flexbox, web fonts y contenido renderizado por JS. También maneja tus cookies de autenticación — las páginas detrás de un login renderizan correctamente porque el diálogo de impresión está en el mismo contexto de navegador que la página.
La pega: requiere que abras realmente la página en una pestaña y pases por el diálogo de impresión. Está bien para uno o dos PDFs. Es tedioso para trabajos por lotes o para HTML que conseguiste vía una API o exportación de CMS. Nuestra herramienta es para esos — HTML en bruto en la mano, quieres un PDF, no quieres abrir una pestaña. Imprimir → Guardar como PDF del navegador es la herramienta correcta para todo lo demás.
El árbol de decisión: pixel-perfect, tienes la página abierta en una pestaña → Imprimir → Guardar como PDF. HTML en bruto en la mano, salida "suficientemente buena," sin subida → esta herramienta. Pixel-perfect y necesitas scriptearlo a través de cientos de URLs → Chromium headless vía Puppeteer o uno de los servicios de pago.
Herramientas PDF relacionadas
El Convertidor HTML a PDF combina con otras pocas en el camino a un documento terminado:
- Imagen a PDF — agrupa una carpeta de imágenes en un único PDF. A menudo la herramienta correcta si tu "HTML" es realmente una pila de capturas de pantalla.
- Unir PDF — combina la salida HTML-a-PDF con otros PDFs (carta de presentación, apéndice, página firmada) en un solo archivo.
- Comprimir PDF — si la salida es inesperadamente grande (páginas largas y muchas imágenes pueden empujar a 5-10 MB), pásala por el compresor.
- PDF a PNG — renderiza cada página del PDF como una imagen una vez que tengas el PDF en la mano.
- Word a PDF — si lo que realmente tienes es un .docx y tropezaste con la herramienta de HTML, esta es la vecina correcta.
Microapp envía cada herramienta PDF del lado del navegador. El 10% de cada dólar de ingresos va a obras benéficas, antes que nada, auditado trimestralmente — las herramientas tienen que ganarse ese 10%, lo que significa que tienen que funcionar realmente sin enterrarte en upsells.
Preguntas frecuentes
¿Por qué falla mi URL?
Cross-Origin Resource Sharing (CORS). Cuando tu navegador trae una URL desde JavaScript en un dominio distinto, el servidor de destino tiene que permitirlo explícitamente vía cabeceras de respuesta. Casi ningún sitio público lo hace. Esta es una característica de seguridad del navegador, no algo que podamos sortear en la página. El camino fiable: abre la URL en una pestaña normal del navegador, ver código fuente (o clic derecho → Ver código fuente de la página), copia el HTML y pégalo en el modo Pegar HTML aquí. Eso evita CORS por completo porque el HTML ahora es local. Las páginas que requieren login tampoco funcionarán — necesitan tus cookies de sesión, que nuestro fetch no puede tomar prestadas.
¿Preserva el CSS?
La mayor parte sí — pero no todo. html2canvas lee los estilos computados del DOM renderizado y los pinta en un canvas. Color, fuente, padding, borde, fondo y posicionamiento básico estándar funcionan. Los estilos inline, las etiquetas <style> dentro de tu HTML y los estilos aplicados vía nombres de clase que lleguen a tu hoja de estilos participan todos. La pega: si tu HTML referencia hojas de estilo externas en otros dominios, esas pueden ser bloqueadas por CORS igual que el fetch de URL de arriba — en ese caso la salida renderizada usa estilos por defecto para esas reglas. Para mejores resultados, integra tu CSS en un bloque <style> arriba del HTML que pegues.
¿Y flexbox y grid?
Flexbox: funciona mayormente para los casos comunes (layouts de fila/columna, alineación básica). Casos límite — flex-wrap con hijos de contenido mixto, alineación por línea base, gaps en porcentaje — a veces renderizan con dimensiones incorrectas. Grid: soporte parcial. Las cuadrículas simples con tracks explícitos de fila/columna suelen funcionar; auto-placement, subgrid y áreas con nombre a menudo no. Las propiedades personalizadas de CSS (--mi-var) se honran cuando se leen directamente pero rompen algunos cálculos de layout. Si tu documento depende mucho de layout moderno, usa Imprimir → Guardar como PDF del navegador (Chrome, Firefox, Safari lo soportan) — eso usa el motor de renderizado real del navegador, no una reimplementación en JS.
¿Y JavaScript?
No se ejecuta. No quitamos nada, pero html2canvas captura el DOM tal como existe cuando se lo entregamos — y no ejecutamos scripts en el contenedor de renderizado fuera de pantalla. Si tu HTML depende de JS para inyectar contenido, ejecuta ese JS primero en una pestaña normal del navegador, ver código fuente del DOM renderizado (DevTools → Elementos → Copiar outerHTML en <html>), y pega la versión post-JS aquí. Gráficos, single-page apps, cualquier cosa que se construya con JS — captura el DOM renderizado y después convierte.
¿Cómo se compara esto con Imprimir → Guardar como PDF del navegador?
Imprimir → Guardar como PDF usa el motor de layout real de tu navegador (Blink en Chrome, WebKit en Safari, Gecko en Firefox), así que acierta en todo — flexbox, grid, web fonts, contenido renderizado por JS, tipografía perfecta. La pega: requiere que abras la página en una pestaña primero y pases por el diálogo de impresión. Nuestra herramienta es para el caso donde tienes HTML en bruto (una plantilla de correo que estás probando, un informe exportado, un fragmento de un CMS) y quieres un PDF sin abrirlo en un navegador primero. Usa Imprimir para fidelidad, usa esto para velocidad y entrada de HTML en bruto amigable para automatización.
¿Mi HTML realmente no se sube?
Correcto para Pegar HTML y Subir .html — ambos corren enteramente en tu navegador, sin peticiones salientes. Para Desde URL hay exactamente una petición saliente: tu navegador trae la URL que escribiste, y eso es todo; el HTML traído se queda en memoria y nunca llega a nuestros servidores. Verifícalo en la pestaña de red del navegador. El PDF se construye localmente y se descarga vía una URL de blob.
¿Por qué la salida es más grande de lo que esperaba?
Porque la página se rasteriza en un canvas, después se re-codifica como JPG cuando aterriza en el PDF. Una página larga con muchas imágenes puede producir fácilmente un PDF de varios MB incluso desde unos pocos KB de HTML origen. Si el tamaño importa, pasa el resultado por nuestro Compresor de PDF — para salida con muchas imágenes a menudo bajará un 50-70%.
¿Puedo convertir una página protegida por contraseña o detrás de un login?
Desde el modo URL no — nuestro fetch no tiene acceso a tus cookies del navegador ni cabeceras de autenticación. Workaround: abre la página en tu pestaña normal del navegador (donde estás logueado), abre DevTools → Elementos, clic derecho en la etiqueta <html> → Copiar → Copiar outerHTML, después pega eso en Pegar HTML. Eso captura la página totalmente renderizada y autenticada incluyendo cualquier DOM que JS construyera tras el login.