Convertir HTML a PDF — Pega el código y guarda el PDF
Convierte código HTML en un PDF con el tamaño de papel y los márgenes que elijas
Funciona en tu navegador · no se sube nada
Pega un fragmento (<div>…) o un documento completo (<html>…). De un documento completo solo se usan el contenido de <body> y los bloques <style>.
Estilos que quieras añadir. También se aplican las reglas @media print.
Por seguridad y privacidad, nunca se solicitan imágenes, fuentes ni CSS que no sean direcciones data: o blob:, y los scripts nunca se ejecutan. No se ofrece convertir una página web a partir de su URL.
Vista previa (ancho imprimible)
Escribe HTML para ver la vista previa.
En el diálogo de impresión, elige «Guardar como PDF» como destino. El PDF conserva el texto real, que se puede buscar; el navegador decide los saltos de página.
Corta la vista previa en imágenes del tamaño de una página. Se descarga directamente, sin diálogo, pero el texto no se puede buscar ni copiar, y una página puede cortarse a mitad de línea.
Qué hace
Presupuestos, recibos y plantillas de correo suelen estar hechos en HTML. Pega aquí el HTML y el CSS, mira la vista previa con el ancho imprimible del papel elegido y guárdalo como PDF de dos maneras: desde el diálogo de impresión, para un PDF con texto, o como PDF de imágenes descargado directamente. El código se queda en esta página; no se envía nada a ningún servidor.
Cómo se usa
- Pega el HTML. De un documento completo (
<html>…) solo se usan el contenido de<body>y los bloques<style>. Si quieres, añade CSS en la segunda caja. - Elige el papel (A4, Carta, A3), la orientación, los márgenes y si se imprimen los fondos.
- Revisa la vista previa y pulsa Guardar como PDF desde el diálogo de impresión; luego elige «Guardar como PDF» como destino.
- O pulsa Descargar un PDF de imágenes para obtener un PDF hecho de imágenes de cada página.
Cómo funciona
- Limpieza: el código se analiza con DOMParser (un documento inerte) y con el analizador de CSS del navegador; se eliminan todas las direcciones que no sean data: o blob: (imágenes, @import, url(), srcset), los elementos script, iframe, object y link, y los atributos on*. Las direcciones eliminadas se muestran en una lista.
- Marco de vista previa: un iframe aislado (sandbox) sin permiso para scripts y con una Content-Security-Policy que bloquea peticiones y scripts.
- Fuentes: se usan las fuentes instaladas en el dispositivo, así que tildes, eñes y cualquier otro alfabeto salen como los muestra el navegador.
- Papel: A4 210×297 mm y A3 297×420 mm (ISO 216), Carta (Letter) 8,5×11 pulgadas; el modo de impresión fija el tamaño y los márgenes con CSS
@page. - PDF de imágenes: el contenido, maquetado con el ancho imprimible (680 px para A4 con márgenes de 15 mm), se captura página a página a 2× y se guarda como JPEG, hasta 50 páginas, con html-to-image (MIT) y pdf-lib (MIT).
- Longitud: hasta 500.000 caracteres entre HTML y CSS.
Ejemplos
| Objetivo | Pasos |
|---|---|
| Un presupuesto en PDF con texto buscable | Insertar ejemplo → A4, márgenes normales → diálogo de impresión → Guardar como PDF |
| Tener el archivo al momento en el móvil | Descargar un PDF de imágenes |
| Una tabla muy ancha | Horizontal, márgenes estrechos |
Para pasar Markdown a PDF, usa Markdown a PDF; para guardar HTML como imagen PNG, una herramienta de HTML a imagen.
Preguntas frecuentes
¿Puedo convertir una página web a partir de su URL?
No. Solo se convierte HTML pegado. Descargar otro sitio en tu nombre le enviaría peticiones desde tu dispositivo, quizá con tu sesión iniciada. Para guardar una página web, ábrela y usa Imprimir → Guardar como PDF del navegador.
¿Qué diferencia hay entre los dos botones?
Guardar como PDF desde el diálogo de impresión usa la impresión del propio navegador, así que el texto se puede buscar y los saltos de página caen entre líneas. Descargar un PDF de imágenes se salta el diálogo, pero guarda cada página como una imagen: el texto no se puede seleccionar y una página puede cortarse a mitad de línea.
¿Por qué faltan mis imágenes o fuentes web?
Por seguridad y privacidad, nunca se solicitan imágenes, fuentes ni hojas de estilo que no sean direcciones data: o blob:. Inserta las imágenes como URL data: en Base64; el texto usa las fuentes instaladas en el dispositivo.
¿Qué pasa con los scripts?
Se eliminan los elementos script y los atributos de evento como onclick, y el marco de vista previa tiene una política que bloquea los scripts, así que nada del código pegado se ejecuta.
¿Puedo controlar los saltos de página?
En el modo de impresión se respetan reglas CSS como `break-before: page`, y las reglas `@media print` de la caja de CSS solo se aplican al imprimir.
