将 html 转换为 pdf 是 web 应用程序中的常见要求。在这篇博文中，我们将探索如何创建一个 next.js api 路由，使用 puppeteer 将 html 转换为 pdf，并确保它在部署到 vercel 时正常工作。
挑战
虽然 puppeteer 是一款功能强大的 html 到 pdf 转换工具，但在部署到 vercel 等无服务器环境时，它带来了挑战。主要问题是：
- puppeteer 需要 chromium 二进制文件，这超出了 vercel 的大小限制。
- 无服务器函数的执行时间和资源有限。
解决方案
我们将使用 @sparticuz/chromium-min 和 puppeteer-core 的组合来克服这些限制。我们将采用以下方法：
- 使用专为无服务器环境设计的最小 chromium 构建。
- 配置 puppeteer 以使用这个最小的 chromium 版本。
- 优化 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，请发送 post 请求，并在请求正文中包含 html 内容：
const response = await fetch('/api/html-to-pdf', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ html: 'Hello, World!
' }),
});
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 的主要挑战。
