Convertidor de HTML a PDF
Pega tu HTML (con su CSS) o abre un archivo .html. La vista previa en directo muestra cómo queda en la página, incluidos los saltos de página, y con un clic lo guardas como PDF.
Última actualización:
Cómo usar Convertidor de HTML a PDF
- Pega tu HTML en el editor o haz clic en Abrir .html para cargar un archivo. Usa Ejemplo para probarlo.
- Elige el tamaño de página, la orientación y los márgenes.
- Revisa la vista previa: las líneas discontinuas muestran dónde empieza cada página nueva del PDF.
- Pulsa Descargar PDF para guardar el archivo, o Imprimir para usar el cuadro de impresión de tu navegador.
Ancho de página en píxeles para los tamaños de papel habituales
Los navegadores maquetan el HTML a 96 píxeles CSS por pulgada, así que el ancho que recibe tu contenido es (ancho del papel − 2 × margen) en mm × 96 ÷ 25.4. Ejemplo: A4 con márgenes de 15 mm da (210 − 30) × 3.7795 = 680 px de ancho útil y (297 − 30) × 3.7795 = 1009 px de alto por página.
| Papel (vertical) | Tamaño | Ancho total | Ancho de contenido, márgenes de 10 mm | Ancho de contenido, márgenes de 15 mm | Alto de contenido, márgenes de 15 mm |
|---|---|---|---|---|---|
| A4 | 210 × 297 mm | 794 px | 718 px | 680 px | 1009 px |
| Carta (US Letter) | 8.5 × 11 in | 816 px | 740 px | 703 px | 943 px |
| Oficio (Legal) | 8.5 × 14 in | 816 px | 740 px | 703 px | 1231 px |
La vista previa usa exactamente estos tamaños, así que las líneas discontinuas de salto de página coinciden con el PDF.
CSS que funciona bien para generar PDF
| Objetivo | CSS |
|---|---|
| Empezar una sección en una página nueva | page-break-before: always; o break-before: page; |
| Mantener un bloque unido | page-break-inside: avoid; |
| Texto de cuerpo legible | font-size: 12pt; line-height: 1.5; |
| Imágenes que nunca se desbordan | img { max-width: 100%; height: auto; } |
| Tablas a todo el ancho | table { width: 100%; border-collapse: collapse; } |
| Fondos de color | Funcionan tal cual: el PDF es una captura de la página renderizada |
Qué se conserva y qué se elimina
Tu HTML se limpia antes de mostrarse, así que el código pegado nunca puede ejecutarse en esta página:
- Se conserva: todos los elementos HTML normales, los atributos
styleen línea, los bloques<style>, las clases, tablas, listas, SVG e imágenes (incluidas las imágenesdata:). - Se elimina:
<script>, los controladores de eventos comoonclickuonerror, los enlacesjavascript:, iframes, embeds, formularios y las hojas de estilo<link>o@import. - Recursos externos: las referencias CSS
url()a otros sitios se descartan y las imágenes remotas solo se cargan si el servidor permite su uso entre orígenes.
Preguntas frecuentes
¿Se sube mi HTML a un servidor?
No. La página se sanea, se maqueta y se convierte en PDF con html2pdf.js dentro de tu navegador, así que tu código nunca sale de tu dispositivo.
¿Por qué se han eliminado mis scripts?
Ejecutar JavaScript desconocido en esta página sería un riesgo de seguridad, así que el código se limpia con DOMPurify antes de mostrarlo. Se eliminan los scripts, los controladores de eventos como onclick, los iframes, los formularios y las hojas de estilo externas. El HTML y el CSS estáticos se mantienen exactamente como están escritos.
¿Se puede seleccionar el texto del PDF?
html2pdf.js toma una captura de alta resolución de cada página, por lo que el PDF se ve exactamente como la vista previa, pero el texto forma parte de la imagen y no se puede seleccionar ni buscar. Usa el botón Imprimir y elige Guardar como PDF si necesitas texto seleccionable.
¿Por qué no aparecen mis imágenes externas?
Las imágenes de otros sitios web solo se muestran si ese servidor permite el acceso entre orígenes (cross-origin). Para obtener resultados fiables, usa imágenes del mismo sitio que el código o incrústalas como URL data:.
¿Cómo fuerzo un salto de página?
Añade style="page-break-before: always" (o break-before: page) al elemento que debe empezar en una página nueva. El convertidor también evita cortar imágenes siempre que puede.
¿Qué ancho de página recibe el HTML?
El área de contenido es igual al ancho del papel menos los márgenes. En A4 con márgenes de 15 mm son 180 mm, o unos 680 píxeles CSS, así que diseña para ese ancho aproximado.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.