HTML a PDF

Cómo usar la herramienta HTML a PDF

Funciones principales de la herramienta HTML a PDF

Acerca de la herramienta HTML a PDF

HTML a PDF carga tu código en un marco oculto, con sandbox, de 794 píxeles de ancho, lo procesa con html2canvas y corta el lienzo en páginas A4 que pdf-lib incrusta como imágenes JPEG con una calidad del 85 %. El código pegado y los archivos subidos siempre son verticales; la pestaña de URL añade la opción horizontal. En el modo URL, la página intenta obtener la dirección directamente y luego a través de un proxy CORS público, y muestra un error si ninguna de las dos devuelve HTML, en lugar de generar un PDF vacío.

Funciona bien para una factura o un informe que hayas escrito en HTML con estilos en línea, para un artículo guardado, o para obtener rápidamente una copia imprimible de una página sencilla. Como cada página es una imagen, el texto no se puede seleccionar y el archivo pesa más que un PDF de texto. Las páginas web obtenidas se procesan sin sus scripts, y las hojas de estilo o imágenes que usan rutas relativas no se cargan, así que los sitios que funcionan como aplicaciones y las páginas detrás de un inicio de sesión normalmente no salen igual que el original.

Cuándo usar la herramienta HTML a PDF

Una herramienta de marketing te dio el HTML de un correo o un boletín, y alguien quiere una prueba en PDF. Pega el código en la pestaña Pegar código HTML; los estilos en línea, los colores y las tablas se procesan como lo harían en un navegador de 794 píxeles de ancho, y las páginas salen como imágenes de esa representación.

Un script o un sistema generó un informe como archivo .html en tu disco, por ejemplo el resultado de una prueba o un impreso de laboratorio. Usa Subir archivo HTML. Las imágenes referenciadas con una ruta relativa como chart.png no se encontrarán, porque el archivo se procesa dentro de esta página y no desde su propia carpeta; insértalas como URLs de tipo data: o usa direcciones https completas primero.

Quieres una copia sin conexión de un artículo público en un formato de página fijo. Escribe la dirección en la pestaña URL de la página web, elige Vertical u Horizontal y A4 o Letter, y convierte. Lee antes la nota de esa pestaña: la dirección puede enviarse a un proxy público, y las páginas que se generan con JavaScript o están detrás de un inicio de sesión suelen salir incompletas.

Cuando necesites texto seleccionable en lugar de una imagen, otras herramientas encajan mejor: texto sin formato con Texto a PDF, un documento Word con Word a PDF. Un PDF creado aquí puede recibir después una capa de texto con OCR PDF, y PDF a HTML hace el camino contrario.

Consejos y solución de problemas

• El mensaje No se pudo obtener seguido de la dirección significa que fallaron los tres intentos: una solicitud directa, luego allorigins.win y después corsproxy.io, cada uno con cuatro segundos de margen. Los sitios lentos fallan solo por el tiempo de espera agotado. Guarda la página desde tu navegador como archivo HTML y usa en su lugar la pestaña Subir archivo HTML.
• Los menús Orientación y Formato de página solo existen en la pestaña URL de la página web. El código pegado y los archivos subidos siempre se procesan en páginas A4 verticales.
• El HTML se maqueta en un marco de 794 píxeles de ancho, el ancho de una página A4 a 96 dpi, y el cuerpo recibe un margen de 30 píxeles salvo que tu HTML defina el suyo, lo que deja 734 píxeles para el contenido. Un contenido más ancho, como una tabla de ancho fijo, ensancha la imagen, y todo el documento se reduce después al ancho de la página, así que su texto sale más pequeño; da a los contenedores un ancho del 100 % o menos.
• Los saltos de página caen a alturas fijas en la imagen procesada, así que una línea de texto o una imagen puede quedar dividida entre dos páginas. Las reglas CSS de salto de página no se tienen en cuenta.
• La descarga se llama html_document.pdf para el código pegado, el nombre de tu archivo con .pdf para una subida, y para una URL el nombre del host con los puntos sustituidos por guiones bajos y recortado a 25 caracteres, por ejemplo en_wikipedia_org.pdf.
• Si un bloqueador de anuncios o un filtro de red impide que html2canvas se cargue desde cdnjs.cloudflare.com, la conversión se detiene con un mensaje que indica que el renderizador de la página no se cargó. Permite ese host, recarga la página y vuelve a convertir.
• Para hacerlo al revés, PDF a HTML convierte la capa de texto de un PDF en un archivo HTML independiente.

Cómo funciona la herramienta HTML a PDF en tu navegador

Sea cual sea la pestaña que uses, la cadena HTML se carga en un marco oculto, fijado fuera de la pantalla, de 794 píxeles de ancho. El marco tiene un sandbox sin permiso para ejecutar scripts, así que no se ejecuta ningún script ni controlador de eventos del código, y los estilos propios de este sitio y su tema oscuro no llegan a él. Cuando el marco se ha cargado (ocho segundos como máximo, si una imagen o una hoja de estilo tarda) y tras una breve pausa para que las fuentes se asienten, html2canvas 1.4.1 recorre ese DOM y lo pinta en un lienzo a una escala de 1,5. El lienzo se corta en fragmentos, cada uno con la altura de una página A4 o Letter a ese ancho; cada fragmento se codifica como JPEG con una calidad del 85 % y pdf-lib lo incrusta en una página nueva, ajustado al ancho de la página.

En las pestañas de pegar y subir, el código nunca sale de la pestaña: File.text() lee el archivo subido en el navegador y, aparte de Google Analytics mientras está activado, las únicas solicitudes son los dos scripts de biblioteca desde cdnjs.cloudflare.com, además de las imágenes u hojas de estilo externas que tu propio HTML referencie. La pestaña de URL intenta primero obtener la dirección directamente, luego a través de allorigins.win y después de corsproxy.io, con cuatro segundos cada intento, y usa la primera respuesta de más de 100 caracteres. Esos servicios ven la dirección que escribiste, pero no el PDF final, que se genera en memoria y se ofrece como un Blob.

Preguntas frecuentes