创建 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 二进制文件设置 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函数中：

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中文网其他相关文章！