Creating a Nextjs API to Convert HTML to PDF with Puppeteer (Vercel-Compatible)

一分耕耘，一分收获！既然打开了这篇文章《Creating a Nextjs API to Convert HTML to PDF with Puppeteer (Vercel-Compatible)》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

将 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 的主要挑战。

以上就是《Creating a Nextjs API to Convert HTML to PDF with Puppeteer (Vercel-Compatible)》的详细内容，更多关于的资料请关注golang学习网公众号！