將 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中文網其他相關文章！
