如何將 HTML 節點輸出轉換為格式化的 Google 文件

問題
1

我正在嘗試將 HTML 內容轉換成格式化的 Google 文件。我目前的工作流程使用 Code 節點來生成基礎資料，然後將其傳遞給 HTML 節點來組織內容。我需要使用 HTML 節點的輸出並建立新的 Google 文件，同時保留 HTML 格式設置。標準 Google Docs 節點可以輕鬆處理純文本，但我正在尋找正確的方法或解決方案來上傳 HTML 輸出，以便樣式保持完整。

2

Hi @Benry_Hendix

問題在於 n8n 中的標準 Google Docs 節點只是為純文字設計的。如果你嘗試向它發送 HTML 代碼，該節點不會「讀取」樣式；它只是將原始 HTML 標籤（如 <b> 或 <h3>）直接列印到頁面上，留下格式混亂的內容。

要修復這個問題，你需要改變你的方法：與其嘗試將文字插入到現有文件中，不如將你的 HTML 作為文件上傳到 Google 雲端硬碟。通過使用一個稱為「mimeType」的特定設定，你可以告訴 Google 在上傳過程中自動將該 HTML 文件轉換為原生 Google Doc。這樣 Google 自己的系統就能處理格式設定，從而保留你的標題、粗體文字和項目符號。

從實際角度來說，這需要用 HTTP Request 節點替換 Google Docs 節點。首先，你使用 Code 節點將 HTML 內容和文件名稱打包成特殊的「multipart」套件，然後 HTTP Request 節點將該套件發送到 Google 雲端硬碟 API。這個解決方案繞過了標準節點的限制，確保你的最終文件看起來專業且格式正確。

下面是 n8n 工作流程的 JSON。你可以複製它並直接貼到你的 n8n 畫布上。

**注意：**導入後，你需要在「Create Google Doc」節點中選擇你自己的 Google Drive OAuth2 認證，因為認證無法在 JSON 中匯出。

3

@Benry_Hendix 很遺憾，你可能會發現要可靠地將 HTML 轉換為 Google Docs 相當困難。HTML/CSS 和 Google Docs 在底層的運作方式差異很大。文字、標題和列表應該相對容易轉換，但其他元件（特別是那些樣式更複雜的）看起來可能會差異很大。

另外兩種可能的方法

  • 先將 HTML 轉換為 Markdown，再將其轉換為 Google Doc，但這樣會變得相當複雜。
  • 將 HTML 轉換為 PDF 而不是 Google Doc

如果有人有好的解決方案，我很有興趣聽聽，但我不知道有什麼可靠的方法可以進行 HTML → Google Doc 轉換。

我知道這可能不是你希望得到的答案，但希望多少有些幫助。

Alex

4

我發現最可靠的方法是跳過 Google Docs 節點，改用透過 HTTP Request 節點的 Google Docs API 的 documents.batchUpdate。做法是：用 Docs 節點建立一個空白文件，然後發送包含一系列 insertText + updateParagraphStyle 請求的 batchUpdate 請求，這些請求是從解析後的 HTML 結構構建的。設定起來工作量比較大，但能讓你獲得實際的標題樣式（HEADING_1、HEADING_2、NORMAL_TEXT）以及 Docs 能夠識別的粗體/斜體文字。

如果你的 HTML 結構很簡單（h1-h3、p、ul/li），通常只需要一個 Code 節點來移除標籤並構建請求陣列 - 不需要外部函式庫。如果你能貼上 HTML 輸出範例，我很樂意分享程式碼片段。

5

Google Docs 節點不適用於此，它只處理純文字。解決方案是使用 Google Drive 的內建轉換器直接上傳你的 HTML。當你上傳 HTML 檔案並告訴 Drive 將其儲存為 Google Doc 時，它會讀取 HTML 標籤並將其轉換為真正的格式、標題、粗體文字、項目符號清單、表格等。

以下是確切的兩步設定：

第 1 步 - 在你的 HTML 節點之後新增一個 Code 節點。這會將你的 HTML 文字轉換成可以上傳的檔案

第 2 步 - 在此之後新增一個 HTTP Request 節點。這是將你的檔案傳送到 Google Drive 的節點。

需要注意的一點：CSS 不會保留。如果你的樣式來自 style= 屬性或 CSS 類別，Google Drive 會忽略它們。它只讀取 <h1>、<strong>、<ul> 和 <table> 等 HTML 標籤。如果你的 HTML 節點已經使用了這些標籤，你就沒問題了。

6

@Benry_Hendix

給你

image
image2088×548 47.9 KB

節點：PDF API Hub

步驟 1，pdf 轉 html

步驟 2，pdf 轉 docx

以下是工作流程

image
image2088×548 47.9 KB

如果你需要對節點或格式進行任何更改，請告訴我，我可以推送更新。

7

你可以先試試其他用戶提供的解決方案，然後再試試這個方法。我之前在 Google Docs 遇到同樣的問題，不想使用 Google Drive，所以我就在 Google Docs 的 App Script 中建立了一個 .gs 檔案，它每分鐘觸發一次（根據我的使用情況），然後它會解析你在觸發後附加到文件中的 HTML 或 MD，你可以根據自己的需求縮短或延長觸發的時間間隔。希望這能為你解決這個問題。

8

@Benry_Hendix 基於上面的 batchUpdate 方法，這是一個 Code 節點片段，可以將基本 HTML（h1–h3、p、strong、ul/li）元素轉換為 Docs API 請求的陣列。這發生在空白文件建立且其 ID 可用之後



// 輸入：{{ $json.html }} — 你的 HTML 字串

// 輸入：{{ $json.html }} — 你的 HTML 字串

// 輸出：batchUpdate 請求的陣列

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

const requests = [];

let index = 1;

const lines = html

.replace(/\u003ch1\u003e(.*?)\u003c\/h1\u003e/gi, ‘##H1##$1\n’)

.replace(/\u003ch2\u003e(.*?)\u003c\/h2\u003e/gi, ‘##H2##$1\n’)

.replace(/\u003ch3\u003e(.*?)\u003c\/h3\u003e/gi, ‘##H3##$1\n’)

.replace(/\u003cp\u003e(.*?)\u003c\/p\u003e/gi, ‘$1\n’)

.replace(/\u003cli\u003e(.*?)\u003c\/li\u003e/gi, ‘• $1\n’)

.replace(/\u003c[^\u003e]+\u003e/g, ‘’)

.split(‘\n’)

.filter(l =\u003e 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 } }];

將 requests 陣列傳遞給 HTTP Request 節點，向 POST https://docs.googleapis.com/v1/documents/{docId}:batchUpdate 發送請求，並使用你的 Google OAuth2 認證。CSS 不會保留，但結構標籤會保留。