メインコンテンツへスキップ
PDF4me API統合AIとSDK知識ベース拡張機能APIテスターブログ

プレーンなPDFからブランド入りのPDFへ：n8nでHTMLヘッダーとフッターを追加！（マージ不要）

· 1分で読める
Sankalp Mishra
SEO and Content Writer

使用している場合は n8n 自動化のために、 HTMLヘッダーとフッター PDF への変換は簡単で、4 つのノード、コード不要です。このガイドでは、Dropbox から PDF をダウンロードし、PDF4me を使用してカスタム ヘッダーまたはフッターを追加し、ブランド化されたファイルをアップロードする n8n ワークフローの設定方法を示します。HTML を直接貼り付けます。 PDFにHTMLヘッダーとフッターを追加する Node.jsの場合、別途ヘッダーファイルは不要です。

必要なもの​

  • n8n: セルフホストまたは n8nクラウドn8nノードパネルからPDF4meノードを追加します。
  • PDF4me APIキー: PDF4me APIキーを取得してください （無料で始められます）。初めてですか？フォローしてください PDF4meをn8nに接続する。
  • DropboxダウンロードとアップロードにはDropboxを使用します。 Googleドライブ、 OneDriveまたは、バイナリファイルの入出力を提供する任意のノード。適切なノードに置き換えても、処理の流れは変わりません。

フローの概要​

n8nワークフローは4つのノードで実行されます。

  1. トリガー: 「ワークフローを実行」をクリックすると テスト用の手動設定、または新しいファイルが現れたときの自動トリガー（Dropbox、Webhookなど）を設定できます。
  2. ファイルをダウンロードする (Dropbox): パスから PDF を取得します。出力はバイナリ フィールド (例: data)
  3. PDFにHTMLヘッダーとフッターを追加する (PDF4me): PDFバイナリを取得し、HTMLを貼り付け、ヘッダーまたはフッターとして適用します。変更されたPDFを新しいバイナリフィールドに出力します(例: document)
  4. ファイルをアップロードする (Dropbox): 変更したPDFを、指定した名前のフォルダに保存します。

マージ手順は不要です。「HTMLヘッダー/フッターの追加」ノードが新しいPDFを直接出力します。同じファイルですが、ブランド名が付けられ、必要に応じて新しい名前を付けることができます。

n8nワークフロー：ワークフローの実行→ファイルのダウンロード→PDFにHTMLヘッダーフッターを追加→ファイルのアップロードをクリックしたとき

ステップ1：トリガーを起動してファイルをダウンロードする​

トリガーとDropboxを追加する ファイルをダウンロードする PDFをワークフローに読み込むためのノード。

  1. トリガーを追加する: 「ワークフローを実行」をクリックすると テストのため、または例えば Dropbox ファイルが作成されたときにトリガーされます。
  2. ファイルをダウンロードする （Dropbox）
  • 接続するための認証情報: Dropboxアカウント。
  • リソースファイル | 手術ダウンロード。
  • ファイルパス: PDFへの完全なパス、例: /Blog Data/sample_3_page.pdf。
  • 出力ファイルをフィールドに配置: data （または別の名前。次のノードで参照します。）
n8n ファイルをダウンロード: ファイルパス /Blog Data/sample_3_page.pdf、出力ファイルをフィールドデータに配置します

ノードを実行します。出力には以下が含まれます。 1点 PDFファイルで data 二進数フィールド。

ステップ2：PDFにHTMLヘッダー/フッターを追加する​

追加する PDF4me ノードを選択して選択する 編集 → PDFにHTMLヘッダー/フッターを追加するHTMLを貼り付け、位置（ヘッダーまたはフッター）と余白を設定します。

  1. PDF4meノードを追加する → 編集 → PDFにHTMLヘッダー/フッターを追加する。
  2. 接続するための認証情報: あなたのPDF4meアカウント。
  3. 入力データタイプバイナリデータ。
  4. 入力バイナリフィールド: data （ダウンロードノードと同じ） 出力ファイルをフィールドに配置)
  5. HTMLコンテンツ （必須）：ヘッダーまたはフッターのHTMLを貼り付けてください。例：
<div style="width:100%; font-family: Segoe UI, Arial, sans-serif; color:#333; padding:12px 18px 8px 18px; box-sizing:border-box;">
 <table style="width:100%; border-collapse:collapse;">
 <tr>
 <td>Your Company Name</td>
 <td style="text-align:right;">Document Title | Page {{page}} of {{total}}</td>
 </tr>
 </table>
</div>
  1. 位置: ヘッダ または フッター。
  2. ページ: all または次のような範囲 1-3 （1～3ページ）
  3. 最初のページをスキップする: オフにするとすべてのページに適用され、オンにすると最初のページをスキップします。
  4. 余白（ピクセル）: n8n は ピクセル。 例： 左余白 5、 右余白 5、 マージントップ 10、 マージンボトム 10.
  5. 出力ファイル名例： document_with_html_header_footer.pdf。
  6. 文書名例： document.pdf （出典参照）
  7. バイナリデータ出力名: document （アップロードノードが読み取るフィールド）。
n8n PDFにHTMLヘッダーフッターを追加：バイナリフィールドデータ、HTMLコンテンツ、位置ヘッダー、ページ1～3、余白（ピクセル単位）を入力

ノードを実行します。出力には、変更された PDF が含まれます。 document バイナリフィールド（ファイルサイズが増加する、例：2.54 kB → 70.3 kB）。

ステップ3：ファイルをアップロードする​

変更したPDFファイルをDropboxに保存してください。

  1. ファイルを追加してアップロードする （Dropbox）
  • 接続するための認証情報同じDropboxアカウント。
  • リソースファイル | 手術： アップロード。
  • ファイルパス: ファイル名を含む完全なパス、例: /Blog Data/Header_Added_Output.pdf。
  • バイナリファイル： の上。
  • 入力バイナリフィールド: document （HTMLヘッダーフッターの追加ノードから）。使用しないでください data、それがオリジナルのPDFです。
n8n ファイルのアップロード: ファイルパス /Blog Data/Header_Added_Output.pdf、入力バイナリフィールドドキュメント

ワークフローを実行します。ファイル Header_Added_Output.pdf （またはあなたが選んだ名前）が、ヘッダーまたはフッターが適用された状態でDropboxに表示されます。

サンプルHTMLスニペット：n8nでコピーして使用​

これら PDF対応 スニペットは HTMLコンテンツ フィールド。下のブロックを展開すると、コピー＆ペーストできます。

ヘッダー​

2段組（著者、日付、改訂）Right column aligned; replace with your text or n8n expressions.
<table style="width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 11px;">
 <tr>
 <td style="width: 50%; vertical-align: top;"></td>
 <td style="width: 50%; text-align: right; vertical-align: top;">
 Author: Per Nordqvist<br/>
 Date: 2025-11-12<br/>
 Revision: 4.24
 </td>
 </tr>
</table>
シンプルな中央揃えの1行
<div style="text-align: center; font-family: Arial, sans-serif; font-size: 12px; color: #333333;">Document Title - Confidential</div>

フッター​

法律／機密
<table style="width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 9px; color: #666666;">
 <tr>
 <td style="text-align: center; padding: 4px 0;">Confidential. For internal use only. All rights reserved.</td>
 </tr>
</table>
ページ番号のみUse {{page}} and {{total}}; PDF4me replaces them per page.
<div style="text-align: center; font-family: Arial, sans-serif; font-size: 10px;">Page {{page}} of {{total}}</div>

HTMLを貼り付ける前に：簡単なチェックリスト​

  • インラインCSS： 使用 style="..." 要素に対して。外部スタイルシートは適用されません。
  • テーブルまたはシンプルなブロック： 使用 <table> または明示的なdiv要素 width 安定したレイアウトを実現するため。
  • 単位: n8n のマージン設定は ピクセル（Px）HTML内では、 px または %。
  • まずテストしてください: スニペットを貼り付けて PDFにHTMLヘッダー/フッターを追加する n8nに配線する前にテストしてください。

:::ヒント APIテスターで試してみてください 上記のコードスニペットを貼り付けて PDFにHTMLヘッダー/フッターを追加するサンプルPDFとAPIキーを使ってテストを実行できます。各コードブロックはすぐにコピー可能です。 :::

使用場所：n8n、Make、Power Automate、API​

  1. n8n上記の手順を使用してください: ダウンロード → PDF に HTML ヘッダー フッターを追加 → アップロード。余白は ピクセル。
  2. 作る: MakeにHTMLヘッダーフッターを追加する. マージン ミリメートル。
  3. パワーオートマタ: Power AutomateにHTMLヘッダー/フッターを追加するDropboxとは別のヘッダーファイルを使用します。
  4. API： 電話 POST /api/v2/AddHtmlHeaderFooter と ドキュメントコンテンツ、 ドキュメント名、 htmlコンテンツ、 そして 位置。

同じHTMLコードはどこでも動作します。

次のステップ​

Get Your API KeyAdd HTML Header Footer in n8nTry Add HTML Header Footer APISame flow in Make