建立 Next.js API 以使用 Puppeteer 將 HTML 轉換為 PDF（與 Vercel 相容）

將 HTML 轉換為 PDF 是 Web 應用程式中的常見要求。在這篇文章中，我們將探索如何建立一個 Next.js API 路由，使用 Puppeteer 將 HTML 轉換為 PDF，並確保它在部署到 Vercel 時正常運作。

挑戰

雖然 Puppeteer 是一款功能強大的 HTML 到 PDF 轉換工具，但在部署到 Vercel 等無伺服器環境時，它帶來了挑戰。主要問題是：

1. Puppeteer 需要 Chromium 二進位文件，這超出了 Vercel 的大小限制。
2. 無伺服器函數的執行時間和資源有限。

解決方案

我們將使用 @sparticuz/chromium-min 和 puppeteer-core 的組合來克服這些限制。我們將採用以下方法：

1. 使用專為無伺服器環境設計的最小 Chromium 建置。
2. 設定 Puppeteer 以使用這個最小的 Chromium 版本。
3. 最佳化 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 二進位檔案設定 P​​uppeteer：

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函數中：

1. 從請求正文中提取 HTML。
2. 使用 getBrowser 函數啟動瀏覽器實例。
3. 建立一個新頁面並將其內容設定為提供的 HTML。
4. 從頁面內容產生 PDF。
5. 關閉瀏覽器以釋放資源。
6. 返回 PDF 作為帶有適當標題的回應。

第 4 步：使用 API

要使用此 API，請傳送 POST 請求，並在請求正文中包含 HTML 內容：

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 時，請記住以下幾點：

1. 執行時間：Vercel 業餘計畫的最長執行時間為 10 秒，專業計畫的最長執行時間為 60 秒。優化您的 HTML 和 PDF 生成流程以適應這些限制。

2. 記憶體使用量：注意記憶體使用情況。最小的 Chromium 二進位檔案會有所幫助，但複雜的 PDF 可能仍會佔用大量記憶體。

3. 冷啟動：無伺服器函數可能會經歷冷啟動。第一次呼叫可能會比較慢，因為它需要下載並設定 Chromium 二進位。

4. 錯誤處理：實作強大的錯誤處理來管理逾時或資源限制。

5. 快取：考慮對頻繁產生的 PDF 實作快取策略，以減少無伺服器函數的負載。

結論

這種方法允許您使用 Next.js 和 Puppeteer 建立功能強大的 HTML 到 PDF 轉換 API，與 Vercel 的無伺服器環境相容。透過利用 @sparticuz/chromium-min 和 puppeteer-core，我們克服了在無伺服器環境中運行 Puppeteer 的主要挑戰。

以上是建立 Next.js API 以使用 Puppeteer 將 HTML 轉換為 PDF（與 Vercel 相容）的詳細內容。更多資訊請關注PHP中文網其他相關文章！