Node で puppeteer を使用して PDF を作成します。

Puppeteer と Node.js を使用して PDF ジェネレーターを作成する方法

動的 PDF の生成は、Web 開発における一般的な要件です。請求書、レポート、履歴書のいずれの場合でも、堅牢な PDF ジェネレーターを作成することは開発者にとって必須のスキルです。この記事では、Node.js と強力なヘッドレス ブラウザ ライブラリである Puppeteer を使用して PDF ジェネレーターを構築する手順を説明します。

例として、私はこれと同じ方法を使用して CV Maker プロジェクト を構築しました。これはユーザー入力を受け取り、PDF を動的に生成します。プロジェクトのライブ デモは、ライブ デモでご覧いただけます。

このガイドは、初心者向けの平易な言葉で書かれています。ご不明な点がございましたら、お気軽にコメントを残してください。できるだけ早く対応させていただきます。

---

前提条件

始める前に、以下のものがあることを確認してください:

• Node.js がマシンにインストールされています。
• 基本的な Node.js プロジェクト スケルトン のセットアップ。
• Puppeteer はプロジェクトに依存関係としてインストールされます:

  npm install puppeteer

このチュートリアルの完全なソース コードを参照したい場合は、私の GitHub リポジトリをチェックしてください。

---

ステップ 1: データを受信するための POST エンドポイントを作成する

まず、クライアントがデータを送信して PDF を生成できるエンドポイントを作成します。このために、index.js (または同等のメイン サーバー ファイル) で単純な POST ルートを定義します。

app.post("/data", async (req: Request, res: Response) => {
    let postData = req.body.data; // Storing the data sent from the client
});

このエンドポイントは、PDF に含める必要があるデータを受信します。

---

ステップ 2: コントローラ ファイルを作成する

コードを整理しておくために、プロジェクト ディレクトリにコントローラーという名前のフォルダーを作成します。このフォルダー内に、PdfController.js という名前のファイルを作成します。

コントローラー ファイル には、PDF を生成するためのロジックを記述します。これにより、コードがモジュール化され、保守が容易になります。

---

ステップ 3: PDF 生成のためのロジックを作成する

PdfController.js に次のコードを追加して、Puppeteer を使用して PDF を生成します。

export default (async function (postData) {
    try {
        const browser = await puppeteer.launch({
            headless: true,
            args: ["--no-sandbox", "--disable-gpu"],
        });

        const page = await browser.newPage();
        const content = `<h1 id="postData">${postData}</h1>`;

        await page.setContent(content);
        await page.emulateMediaType('screen');
        await page.pdf({
            path: 'resume.pdf',
            format: 'A4',
            printBackground: true,
        });

        console.log('PDF created');
        await browser.close();
    } catch (err) {
        console.error('Error:', err);
    }
});

このコードの動作は次のとおりです:

1. Puppeteer ブラウザ インスタンスを ヘッドレス モード で起動します。
2. 新しいページを開き、ユーザーが提供したデータを使用してコンテンツを設定します。
3. ページのコンテンツを PDF に変換し、resume.pdf として保存します。
4. ブラウザを閉じてリソースを解放します。

---

ステップ 4: POST エンドポイントで PdfController 関数を使用する

次に、PdfController 関数をindex.js の POST エンドポイントに接続します。

import PdfController from "./controllers/controller.js";

app.post("/data", async (req: Request, res: Response) => {
    let postData = req.body.data; // Storing the data sent from the client
    await PdfController(postData);
});

これにより、/data エンドポイントが呼び出されるたびに、PDF を生成するロジックが実行されるようになります。

---

ステップ 5: PDF の生成を確認する

この時点で、Postman またはその他の HTTP クライアントを使用してエンドポイントをテストできます。関連するテキスト データを含む POST リクエストを送信すると、resume.pdf という名前の PDF がプロジェクトのルート ディレクトリに作成されます。

---

ステップ 6: PDF をクライアントに送り返す

生成された PDF を応答としてクライアントに送り返すには、fs-extra パッケージをインストールします。

  npm install puppeteer

次に、次のように POST エンドポイントを更新します。

app.post("/data", async (req: Request, res: Response) => {
    let postData = req.body.data; // Storing the data sent from the client
});

このコードは、resume.pdf ファイルをダウンロード可能な添付ファイルとしてクライアントに送信します。

---

結論

それで終わりです! ? Node.js と Puppeteer を使用して完全な PDF ジェネレーターを構築しました。この設定では、ユーザー入力に基づいて PDF を動的に生成し、ダウンロード可能なファイルとして送り返します。

これが達成したことです:

• POST エンドポイントを使用して Node.js サーバーをセットアップします。
• Puppeteer を使用して PDF を動的に生成しました。
• 生成された PDF をクライアントに送り返しました。

---

ボーナス

適切に構造化され、書式設定された PDF (表やスタイルを含む履歴書や請求書など) を生成したい場合は、コメントでお知らせください。高度な使用例については、別のチュートリアルを書きたいと思っています。

また、完全なプロジェクト コードを自由にチェックしてください。十分に文書化されており、初心者にも優しいです。

良い一日をお過ごしください!

以上がNode で puppeteer を使用して PDF を作成します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。