Exporta contenido HTML de Google Docs a tu página o aplicación web, claves

▶

Quería mostrarte cómo exportar cualquier documento de Google Docs a una página HTML para luego utilizar ese contenido, por ejemplo, en un visor web, como hago yo con mis libros en la plataforma.

1. El Problema del HTML Generado por Google Docs

Cuando utilizamos la opción de descarga de Google Docs (Página web (.html, comprimido)), se genera un archivo HTML con un grave inconveniente:

• Estilos Incorporados: El documento es una página HTML masiva que incluye una gran cantidad de clases y atributos style inline. Por ejemplo, define font-style, font-family, y hace inline block constantemente.
• Conflicto de Estilos: No podemos heredar estos estilos predefinidos en nuestro sitio web porque romperían el diseño que ya tenemos definido. El objetivo es que el estilo sea provisto completamente por nuestra aplicación.

order: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 566.93px; height: 316.85px;"><img alt="" src="images/image83.png" style="width: 566.93px; height: 316.85px; margin-left: -0.00px; margin-top: -0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c14 c12"><span class="c0"></span></p><p 

2. ️ La Solución: Saneamiento de Código con JavaScript

Para solucionar esto, debemos limpiar el código antes de registrarlo en el servidor. Yo utilizo un editor CKEditor para gestionar el contenido del libro (separado por capítulos) y el siguiente proceso para sanearlo:

A. La Necesidad de Modificar el HTML fuera del Editor

No podemos modificar el contenido directamente en el CKEditor mediante JavaScript, ya que el editor detecta el cambio y lo sobrescribe, aniquilando la limpieza.

Replicar el Contenido: Antes de enviar el formulario, capturo el contenido del CKEditor (editor.getData()) y lo replico en un <div> oculto, que es el que voy a modificar:

document.querySelector("#htmlCkeditor").innerHTML = editor.getData()

Entonces antes de registrar el contenido que es lo que yo estoy haciendo por acá antes de enviar el formulario por aquí Leo el contenido en este caso es importante que repliques el contenido del editor en otro bloque html cosa que estoy haciendo ya que no lo puedes editar directamente o al menos.

Una vez en el div oculto, utilizo querySelectorAll de JavaScript para seleccionar todos los elementos HTML que pudieron ser generados por Google Docs (párrafos, listas, imágenes, encabezados, etc.) y les elimino los atributos indeseados:

document.querySelectorAll("#htmlCkeditor p, #htmlCkeditor ul, #htmlCkeditor li, #htmlCkeditor img, #htmlCkeditor h1, #htmlCkeditor h2, #htmlCkeditor h3, #htmlCkeditor h4, #htmlCkeditor h5, #htmlCkeditor h6, #htmlCkeditor span, #htmlCkeditor a"
                               )
                           .forEach(e => {
                               e.removeAttribute("class")
                               e.removeAttribute("style")
                           });

Este código elimina completamente todos los atributos class y style que Google Docs insertó, dejando únicamente la estructura semántica.

3. ✅ Resultado Final

Con el contenido completamente limpio (saneado), ya se puede enviar al servidor (en mi caso, mediante Livewire). También aprovecho esta fase para quitar bloques indeseados que genera el propio CKEditor (como los saltos de línea <br>).

De esta forma, puedes migrar tus documentos de Google Docs y aplicar tu propio estilo CSS (para párrafos, encabezados o bloques de código) sin conflictos.