Puppeteer を使用して HTML を PDF に変換する Next.js API を作成する (Vercel 互換)-jsチュートリアル-php.cn

Puppeteer を使用して HTML を PDF に変換する Next.js API を作成する (Vercel 互換)

Patricia Arquette

リリース： 2024-10-12 06:24:02

オリジナル

977 人が閲覧しました

Creating a Next.js API to Convert HTML to PDF with Puppeteer (Vercel-Compatible)

HTML から PDF への変換は、Web アプリケーションでは一般的な要件です。このブログ投稿では、Puppeteer を使用して HTML を PDF に変換する Next.js API ルートを作成する方法を検討し、それが Vercel にデプロイされたときに機能することを確認します。

挑戦

Puppeteer は HTML から PDF への変換のための強力なツールですが、Vercel のようなサーバーレス環境に導入する場合には課題が生じます。主な問題は次のとおりです:

Puppeteer には Vercel のサイズ制限を超える Chromium バイナリが必要です。
サーバーレス関数の実行時間とリソースには制限があります。

解決策

これらの制限を克服するために、@sparticuz/chromium-min と puppeteer-core を組み合わせて使用します。以下にそのアプローチ方法を示します:

サーバーレス環境用に設計された最小限の Chromium ビルドを使用します。
この最小限の Chromium バージョンを使用するように Puppeteer を構成します。
サーバーレス実行用に PDF 生成プロセスを最適化します。

ステップ 1: プロジェクトのセットアップ

まず、新しい Next.js プロジェクトを作成するか、既存のプロジェクトを使用します。次に、必要な依存関係をインストールします。

npm install @sparticuz/chromium-min puppeteer-core

ログイン後にコピー

互換性と最適なパフォーマンスを確保するには、必要なパッケージの正しいバージョンを使用することが重要です。最新のテストの時点では、次のバージョンが推奨されています:

{
  "dependencies": {
    "@sparticuz/chromium-min": "^129.0.0",
    "puppeteer-core": "^23.5.0"
  }
}

ログイン後にコピー

ステップ 2: API ルートの作成

app/api/html-to-pdf/route.js (Next.js 13 アプリルーターの場合) または pages/api/html-to-pdf.js (Pages ルーターの場合) に新しいファイルを作成します。コードは次のとおりです:

const chromium = require("@sparticuz/chromium-min");
const puppeteer = require("puppeteer-core");

async function getBrowser() {
  return puppeteer.launch({
    args: [...chromium.args, "--hide-scrollbars", "--disable-web-security"],
    defaultViewport: chromium.defaultViewport,
    executablePath: await chromium.executablePath(
      `https://github.com/Sparticuz/chromium/releases/download/v129.0.0/chromium-v129.0.0-pack.tar`
    ),
    headless: chromium.headless,
    ignoreHTTPSErrors: true
  });
}

export async function POST(request) {
  try {
    const { html } = await request.json();

    const browser = await getBrowser();
    const page = await browser.newPage();
    await page.setContent(html, { waitUntil: "networkidle0" });
    const pdfBuffer = await page.pdf({
      format: "A4",
      printBackground: true,
      margin: { top: "1cm", right: "1cm", bottom: "1cm", left: "1cm" }
    });
    await browser.close();

    return new Response(pdfBuffer, {
      headers: {
        "Content-Type": "application/pdf",
        "Content-Disposition": 'attachment; filename="output.pdf"'
      }
    });
  } catch (error) {
    console.error("Error generating PDF:", error);
    return new Response(JSON.stringify({ error: "Failed to generate PDF" }), {
      status: 500,
      headers: { "Content-Type": "application/json" }
    });
  }
}

ログイン後にコピー

ステップ 3: コードを理解する

このコードの重要な部分を分析してみましょう:

ブラウザの設定

getBrowser 関数は、最小限の Chromium バイナリを使用して Puppeteer をセットアップします。

async function getBrowser() {
  return puppeteer.launch({
    args: [...chromium.args, "--hide-scrollbars", "--disable-web-security"],
    defaultViewport: chromium.defaultViewport,
    executablePath: await chromium.executablePath(
      `https://github.com/Sparticuz/chromium/releases/download/v129.0.0/chromium-v129.0.0-pack.tar`
    ),
    headless: chromium.headless,
    ignoreHTTPSErrors: true
  });
}

ログイン後にコピー

この構成では、@sparticuz/chromium-min パッケージを使用して、サーバーレス環境と互換性のある最小限の Chromium バイナリを提供します。

PDF の生成

PDF 生成の主なロジックは POST 関数にあります:

リクエスト本文から HTML を抽出します。
getBrowser 関数を使用してブラウザインスタンスを起動します。
新しいページを作成し、そのコンテンツを提供された HTML に設定します。
ページのコンテンツから PDF を生成します。
ブラウザを閉じてリソースを解放します。
適切なヘッダーを含む応答として PDF を返します。

ステップ 4: API の使用

この API を使用するには、リクエスト本文に HTML コンテンツを含む POST リクエストを送信します。

const response = await fetch('/api/html-to-pdf', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ html: '<h1>Hello, World!</h1>' }),
});

if (response.ok) {
  const blob = await response.blob();
  // Handle the PDF blob (e.g., download or display)
}

ログイン後にコピー

導入に関する考慮事項

Vercel にデプロイする場合は、次の点に留意してください:

実行時間: Vercel の最大実行時間は、ホビープランの場合は 10 秒、プロプランの場合は 60 秒です。これらの制限内に収まるように HTML および PDF の生成プロセスを最適化します。
メモリ使用量: メモリ使用量に注意してください。最小限の Chromium バイナリは役に立ちますが、複雑な PDF では依然として大量のメモリを使用する可能性があります。
コールドスタート: サーバーレス関数でコールドスタートが発生する可能性があります。最初の呼び出しは、Chromium バイナリをダウンロードしてセットアップする必要があるため、時間がかかる可能性があります。
エラー処理: タイムアウトやリソース制約を管理するための堅牢なエラー処理を実装します。
キャッシュ: サーバーレス機能の負荷を軽減するために、頻繁に生成される PDF のキャッシュ戦略の実装を検討してください。

結論

このアプローチでは、Next.js と Puppeteer を使用して、Vercel のサーバーレス環境と互換性のある強力な HTML から PDF への変換 API を作成できます。 @sparticuz/chromium-min と puppeteer-core を活用することで、サーバーレスコンテキストで Puppeteer を実行する際の主な課題を克服しました。

以上がPuppeteer を使用して HTML を PDF に変換する Next.js API を作成する (Vercel 互換)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。