Cómo convertir la salida de un nodo HTML en un Google Doc formateado

Preguntas
1

Estoy intentando convertir contenido HTML en un documento de Google formateado. Mi flujo de trabajo actual utiliza un nodo Code para generar los datos base, que luego se pasan a un nodo HTML para estructurar el contenido. Necesito tomar la salida de este nodo HTML y crear un nuevo Documento de Google mientras se preserva el formato HTML. El nodo estándar de Google Docs maneja fácilmente texto plano, pero estoy buscando el método correcto o una solución alternativa para cargar la salida HTML de modo que el estilo se mantenga intacto.

2

Hola @Benry_Hendix

El problema es que el nodo estándar de Google Docs en n8n está diseñado solo para texto plano. Si intentas enviar código HTML a este nodo, el nodo no “lee” el estilo; simplemente imprime las etiquetas HTML sin procesar (como <b> o <h3>) directamente en la página, dejándote con un desastre sin formato.

Para solucionar esto, tienes que cambiar tu enfoque: en lugar de intentar insertar texto en un documento existente, subes tu HTML como un archivo a Google Drive. Usando una configuración específica llamada “mimeType”, puedes indicarle a Google que convierta automáticamente ese archivo HTML en un Google Doc nativo durante el proceso de carga. Esto permite que el propio sistema de Google maneje el formato, lo que preserva tus encabezados, texto en negrita y viñetas.

En términos prácticos, esto requiere reemplazar el nodo de Google Docs con un nodo HTTP Request. Primero usas un nodo Code para empaquetar tu contenido HTML y el nombre del documento en un paquete especial llamado “multipart”, y luego el nodo HTTP Request envía ese paquete a la API de Google Drive. Este workaround evita las limitaciones del nodo estándar y asegura que tu documento final se vea profesional y con el estilo correcto.

A continuación está el JSON para el flujo de trabajo de n8n. Puedes copiar esto y pegarlo directamente en tu lienzo de n8n.

Nota: Tendrás que seleccionar tus propias credenciales de Google Drive OAuth2 en el nodo «Create Google Doc» después de importar, ya que las credenciales no se pueden exportar en JSON.

3

@Benry_Hendix lamentablemente te va a resultar difícil convertir HTML → Doc de forma confiable. HTML/CSS y Google Docs funcionan de manera bastante diferente internamente. Texto, encabezados y listas deberían convertirse bastante fácilmente, pero los otros componentes (particularmente los más estilizados) probablemente se verán bastante diferentes.

Dos enfoques potenciales alternativos

  • Convertir el HTML a markdown y LUEGO convertir eso a un documento de Google, pero eso se pone bastante complicado.
  • Convertir el HTML a un PDF en lugar de a un documento de Google

Si alguien tiene una buena solución, me gustaría escucharla, pero no conozco ningún método confiable para hacer conversiones de HTML → Google Doc.

No es la respuesta que esperabas, estoy seguro, pero espero que sea algo útil de todas formas.

Alex

4

El camino más confiable que he encontrado para esto es omitir el nodo de Google Docs y usar la API de Google Docs documents.batchUpdate a través del nodo HTTP Request en su lugar. El enfoque: crear un documento en blanco con el nodo Docs, luego enviar una solicitud batchUpdate con una serie de solicitudes insertText + updateParagraphStyle construidas a partir de tu estructura HTML analizada. Es más trabajo de configurar, pero te da estilos de encabezado reales (HEADING_1, HEADING_2, NORMAL_TEXT) y ejecuciones de negrita/cursiva que Docs realmente reconoce.

Si tu estructura HTML es simple (h1-h3, p, ul/li), un nodo Code que elimine las etiquetas y construya el array de solicitudes generalmente es suficiente - no se necesitan bibliotecas externas. Con gusto comparto un fragmento de código si puedes pegar una muestra de cómo se ve tu salida HTML.

5

El nodo de Google Docs no funcionará para esto; solo maneja texto plano. La solución es subir tu HTML directamente a Google Drive usando su convertidor integrado. Cuando subes un archivo HTML y le dices a Drive que lo guarde como un Google Doc, lee las etiquetas HTML y las convierte en formato real, encabezados, texto en negrita, listas de viñetas, tablas, todo.

Aquí está la configuración exacta de dos pasos:

Paso 1 - Añade un nodo Code después de tu nodo HTML. Esto convierte tu texto HTML en un archivo que se puede subir

Paso 2 - Añade un nodo HTTP Request después. Este es el nodo que envía tu archivo a Google Drive.

Una cosa a tener en cuenta: el CSS no se transfiere. Si tu estilo proviene de atributos style= o clases CSS, Google Drive los ignora. Solo lee etiquetas HTML como <h1>, <strong>, <ul> y <table>. Si tu nodo HTML ya está usando esas etiquetas, estás listo.

6

@Benry_Hendix

Aquí está

image
image2088×548 47.9 KB

Nodo: PDF API Hub

Paso 1, pdf a html

paso 2, pdf a docx

aquí está el flujo de trabajo

image
image2088×548 47.9 KB

si necesitas algún cambio en el nodo o formato, avísame, puedo hacer una actualización

7

Puedes probar primero las soluciones que dieron otros usuarios y luego intenta esto. Yo estaba teniendo el mismo problema con Google Docs y no quería usar Google Drive, así que simplemente creé un archivo .gs en App Script dentro de Google Docs que se ejecuta cada minuto (según mi caso de uso) y luego analiza el HTML o MD, lo que sea que estés añadiendo al documento después de que se active. Puedes acortar y alargar la duración del disparador según tus necesidades. Espero que esto solucione el problema.

8

@Benry_Hendix Ampliando el enfoque batchUpdate anterior, aquí hay un fragmento de nodo Code que realiza la conversión de elementos HTML básicos (h1–h3, p, strong, ul/li) en un array de solicitudes de la API de Docs. Esto ocurre después de que se ha creado un documento en blanco y su ID está disponible



// Input: {{ $json.html }} — tu cadena HTML

// Input: {{ $json.html }} — tu cadena HTML

// Output: array de solicitudes batchUpdate

const html = $input.first().json.html;

const requests = [];

let index = 1;

const lines = html

.replace(/<h1>(.*?)<\/h1>/gi, ‘##H1##$1\n’)

.replace(/<h2>(.*?)<\/h2>/gi, ‘##H2##$1\n’)

.replace(/<h3>(.*?)<\/h3>/gi, ‘##H3##$1\n’)

.replace(/<p>(.*?)<\/p>/gi, ‘$1\n’)

.replace(/<li>(.*?)<\/li>/gi, ‘• $1\n’)

.replace(/<[^>]+>/g, ‘’)

.split(‘\n’)

.filter(l => l.trim());

for (const line of lines) {

const isH1 = line.startsWith(‘##H1##’);

const isH2 = line.startsWith(‘##H2##’);

const isH3 = line.startsWith(‘##H3##’);

const text = line.replace(/##H[123]##/, ‘’) + ‘\n’;

const style = isH1 ? ‘HEADING_1’ : isH2 ? ‘HEADING_2’ : isH3 ? ‘HEADING_3’ : ‘NORMAL_TEXT’;

requests.push({ insertText: { location: { index }, text } });

if (style !== ‘NORMAL_TEXT’) {

requests.push({

  updateParagraphStyle: {

    range: { startIndex: index, endIndex: index + text.length },

    paragraphStyle: { namedStyleType: style },

    fields: 'namedStyleType'

  }

});

}

index += text.length;

}

return [{ json: { requests } }];

Pasa el array requests a un nodo HTTP Request que envíe POST a https://docs.googleapis.com/v1/documents/{docId}:batchUpdate con tus credenciales de Google OAuth2. El CSS no se transferirá, pero las etiquetas estructurales sí.