将 HTML 转换为 PDF 是 Web 应用程序中的常见要求。在这篇博文中，我们将探索如何创建一个 Next.js API 路由，使用 Puppeteer 将 HTML 转换为 PDF，并确保它在部署到 Vercel 时正常工作。
虽然 Puppeteer 是一款功能强大的 HTML 到 PDF 转换工具，但在部署到 Vercel 等无服务器环境时，它带来了挑战。主要问题是：
我们将使用 @sparticuz/chromium-min 和 puppeteer-core 的组合来克服这些限制。我们将采用以下方法：
首先，创建一个新的 Next.js 项目或使用现有的项目。然后，安装必要的依赖项：
npm install @sparticuz/chromium-min puppeteer-core
为了确保兼容性和最佳性能，使用所需软件包的正确版本非常重要。截至最新测试，推荐使用以下版本：
{
"dependencies": {
"@sparticuz/chromium-min": "^129.0.0",
"puppeteer-core": "^23.5.0"
}
}
在 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" }
});
}
}
让我们分解一下这段代码的关键部分：
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生成的主要逻辑在POST函数中：
要使用此 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 时，请记住以下几点：
执行时间：Vercel 业余计划的最长执行时间为 10 秒，专业计划的最长执行时间为 60 秒。优化您的 HTML 和 PDF 生成过程以适应这些限制。
内存使用情况：注意内存使用情况。最小的 Chromium 二进制文件会有所帮助，但复杂的 PDF 可能仍会占用大量内存。
冷启动：无服务器函数可能会经历冷启动。第一次调用可能会比较慢，因为它需要下载并设置 Chromium 二进制文件。
错误处理：实施强大的错误处理来管理超时或资源限制。
缓存：考虑对频繁生成的 PDF 实施缓存策略，以减少无服务器函数的负载。
这种方法允许您使用 Next.js 和 Puppeteer 创建功能强大的 HTML 到 PDF 转换 API，与 Vercel 的无服务器环境兼容。通过利用 @sparticuz/chromium-min 和 puppeteer-core，我们克服了在无服务器环境中运行 Puppeteer 的主要挑战。
以上是创建 Next.js API 以使用 Puppeteer 将 HTML 转换为 PDF（与 Vercel 兼容）的详细内容。更多信息请关注PHP中文网其他相关文章！
