将 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 的主要挑战。
以上就是Creating a Nextjs API to Convert HTML to PDF with Puppeteer (Vercel-Compatible)的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1493157.html
微信扫一扫 
支付宝扫一扫 
