Exportar HTML Autónomo desde Chrome para Importar

Las tres opciones de Guardar como en Chrome, y por qué solo una se acerca

Pulsa Ctrl+S (Cmd+S en un Mac) en cualquier página de Chrome y verás tres opciones: Página web, completa; Página web, solo HTML; y MHTML, archivo único. Si tu objetivo es exportar HTML desde Chrome como un único archivo portátil para una herramienta de importación, solo uno de esos tres nombres es honesto sobre lo que realmente produce, y probablemente no es el que imaginas.

Página web, completa escribe el marcado en un archivo .html y coloca cada imagen, hoja de estilos y script en una carpeta _files junto a él. Las dos piezas tienen que viajar juntas. Mueve el archivo .html por sí solo y cada referencia relativa se rompe. Eso lo descarta como un único archivo autónomo. También es el modo que la mayoría elige por defecto, ya que aparece primero en el menú desplegable.

Página web, solo HTML escribe solo el marcado, sin carpeta _files en absoluto. Es la más pequeña de las tres, y la menos útil aquí: cada referencia a un recurso externo permanece en el archivo, apuntando a imágenes y hojas de estilos que ya no están adjuntas. Ábrelo más tarde y obtienes texto desnudo donde antes estaba la página.

MHTML parece autónomo. No es HTML puro

MHTML, archivo único produce un solo archivo con todo integrado, por lo que resulta tentador tratarlo como la respuesta. Pero por dentro no es HTML puro. MHTML envuelve la página en codificación MIME multipart/related, la misma técnica que usan los navegadores para los adjuntos de correo HTML: un encabezado estilo email con el título, la URL de origen y la marca de tiempo, seguido del HTML y luego cada recurso, codificado en base64 y separado por cadenas límite. Chrome 86 y versiones posteriores escriben este formato a través de Guardar como. La misma salida también está disponible de forma programática a través del método saveAsMHTML de la API de extensiones pageCapture, que es lo que invocan la mayoría de las extensiones de captura automática en vez de reimplementar el formato ellas mismas. Una restricción que conviene conocer: el archivo resultante solo puede reabrirse desde el sistema de archivos local, y solo en el marco principal del navegador, nunca dentro de un iframe.

Por qué MHTML no es el HTML autónomo que una herramienta de importación necesita

Una herramienta construida para analizar HTML puro, incluida la zona de arrastre de UnHTML, lee un archivo .html como HTML: etiquetas, atributos, un DOM. Un archivo .mhtml no es eso. Es un contenedor MIME con una parte HTML enterrada dentro de límites codificados en base64, y un analizador de HTML puro no lo desempaquetará correctamente. Arrastra un archivo .mhtml a un importador que espera HTML autónomo y, en el mejor de los casos, no obtienes nada legible.

Hay una segunda brecha que conviene conocer, incluso si nunca te topas con el problema de formato. El JavaScript incrustado no se ejecuta cuando se reabre un archivo MHTML; solo sobrevive el HTML que ya se había renderizado en el momento de la captura. Para una página mayormente estática, eso rara vez importa. Para cualquier cosa que construye parte de su diseño después de la carga, la captura carece de todo lo que se ejecutó tras la instantánea.

Si ya tienes un archivo .mhtml y necesitas HTML puro a partir de él, vuelve a abrirlo en Chrome y guárdalo de nuevo con una extensión real de archivo único. No intentes editar a mano el contenedor MIME. Firefox no lee MHTML de forma nativa en absoluto, así que un archivo .mhtml guardado en una máquina no es algo que puedas entregar con seguridad a un compañero en otro navegador.

Construir un verdadero archivo HTML único con todo integrado

Un archivo HTML realmente autónomo integra su CSS e imágenes directamente en el marcado, normalmente como URI de datos en base64, de modo que el archivo único no deja referencias externas que puedan romperse. Chrome no hace esto de forma nativa. No hay ningún panel de DevTools ni opción de Guardar como que recorra una página y reescriba cada <img src> y <link rel="stylesheet"> en una URI de datos en línea; ese paso de conversión pertenece a una extensión de captura de terceros.

Los pasos, en orden:

1. Carga la página por completo en Chrome y recórrela una vez con el scroll, para que cualquier imagen o sección de carga diferida se renderice en el DOM antes de la captura. Si te saltas esto, tu captura carecerá de lo que aún no se había cargado.
2. Ejecuta una extensión de captura de archivo único que integre CSS e imágenes como URI de datos, en lugar del Guardar como nativo de Chrome. La mayoría de estas extensiones añaden un botón en la barra de herramientas que activa la captura en la pestaña activa, sin necesidad de una aplicación aparte.
3. Guarda el resultado como un único archivo .html, con un nombre que siga teniendo sentido una vez que esté en una carpeta de descargas junto a una docena de otros.
4. Abre ese archivo directamente desde el disco, no a través de un servidor local, y confirma que cada imagen y estilo se renderiza sin referencias rotas, sin actividad en la pestaña de red, y sin nada que apunte de vuelta al dominio original. Una captura que todavía contacta con el sitio en vivo no es realmente autónoma.

Una compensación honesta: la codificación base64 añade aproximadamente un 33 por ciento al tamaño de lo que envuelve, por lo que una exportación integrada en un solo archivo termina siendo de forma fiable más grande que la suma de los recursos originales separados de la página. Una imagen principal de 200 KB se convierte en casi 266 KB una vez que es texto base64 dentro del HTML. Un puñado de fotos grandes puede convertir una página en un archivo de varios megabytes de esta forma. Ese es el costo de la portabilidad real, no un fallo del proceso, y conviene saberlo antes de que te sorprenda el tamaño de un archivo al importarlo.

Qué conserva una captura estática, y qué pierde

Una exportación de archivo único, ya sea MHTML o HTML integrado, congela el DOM en el momento de la captura. Todo lo que ya está renderizado se conserva: texto, diseño, imágenes que ya cargaron, estilos ya aplicados. Todo lo que ocurre después de ese momento no se conserva, porque ningún script de la página vuelve a ejecutarse cuando el archivo se reabre sin conexión.

Esta distinción importa sobre todo en páginas construidas en torno a comportamiento del lado del cliente: contenido que carga al desplazarse, datos que llegan de una petición retrasada, o vistas que cambian con enrutamiento del lado del cliente. Toma un feed de desplazamiento infinito como ejemplo. Una captura estática solo tiene el puñado de elementos que ya se habían cargado cuando guardaste, no el resto del feed al que un visitante llegaría desplazándose más. Una página de marketing mayormente estática o un artículo de documentación funciona bien con un Guardar como sencillo; captura todo lo que importa. Una aplicación de página única cargada de JavaScript es otra historia, y una herramienta de captura que controla una sesión de navegador real, esperando a que la actividad de red se estabilice antes de tomar la instantánea, es la opción más adecuada.

Cuando Guardar como no es suficiente

Existen dos caminos fuera del propio menú de exportación de Chrome, y ambos merece la pena conocerlos antes de asumir que un Guardar como del navegador es la única vía de entrada.

Los usuarios de Safari tienen una cuarta opción que Chrome no tiene: el formato .webarchive. Agrupa el HTML con su CSS, imágenes y JavaScript vinculados en uno de los archivos de lista de propiedades binaria de Apple, legible de forma nativa solo en Safari y construido con una codificación distinta a la del contenedor MIME de MHTML. UnHTML acepta archivos .webarchive directamente como alternativa al HTML autónomo, la ruta más práctica si ya estás en un Mac y prefieres no instalar una extensión de captura. Consulta guardar una página como archivo web de Safari para la guía completa, incluyendo dónde coloca macOS el archivo por defecto.

Para un sitio en vivo, o cualquier cosa que renderice su diseño con JavaScript después de la carga, salta por completo el diálogo de Guardar como del navegador. Usa en su lugar la CLI de captura de código abierto o el bookmarklet. Controla la página como lo haría una visita real, espera a que el diseño se estabilice, y luego escribe el resultado como un scene.json en lugar de un archivo HTML, evitando por completo el problema del análisis de HTML puro. El proceso para un sitio de React o Vue, incluyendo cómo maneja la CLI el enrutamiento del lado del cliente, se cubre en importar un sitio de React o Vue a Figma.

La conclusión

De las tres opciones de Guardar como de Chrome, ninguna te entrega un archivo único listo para usar de la forma en que lo espera un importador de HTML autónomo, no sin un paso adicional. Página web, completa se divide en dos piezas que tienen que permanecer juntas. Página web, solo HTML descarta los recursos por completo. MHTML lo agrupa todo, pero en un contenedor MIME, no en HTML puro, y cualquier JavaScript que se ejecutó tras la carga desaparece de todas formas, sin importar cuál de los tres modos produjo el archivo. Para una página mayormente estática, la ruta fiable es una extensión de captura que integra CSS e imágenes como URI de datos en un verdadero archivo .html, aceptando la sobrecarga de base64 de aproximadamente un 33 por ciento como el costo de la portabilidad. El archivo web de Safari y la CLI de captura en vivo son los respaldos correctos cuando Guardar como no puede hacer el trabajo: archivo web si ya estás en un Mac, la CLI si la página renderiza su contenido con JavaScript después de la carga inicial. Una vez que una importación llega como capas, consulta convertir una importación en componentes reutilizables para el siguiente paso. Y si una captura resulta más grande de lo que permite el nivel gratuito, el nivel Pro elimina el límite de 500 capas en la página de precios.