Tạo File PDF Từ HTML & CSS Chuẩn Pixel Bằng Puppeteer Trong Node.js
Dựng tài liệu hóa đơn, báo cáo PDF chất lượng cao từ mã nguồn HTML và CSS sử dụng trình duyệt Chrome không đầu (headless) Puppeteer.
Tạo các tài liệu PDF hoàn hảo từng pixel như hóa đơn, chứng chỉ và báo cáo tuân thủ từ HTML và CSS tốt nhất là dùng Chrome headless qua Puppeteer.
Cài Đặt Puppeteer
npm install puppeteer
Tải file PDF mẫu 1MB chuẩn để so sánh với kết quả render Puppeteer của bạn.
Tải File Mẫu 1MB PDF →Render HTML Sang PDF Với Puppeteer
import puppeteer from 'puppeteer';
export interface PdfRenderOptions {
htmlContent: string;
outputPath?: string;
format?: 'A4' | 'Letter';
}
export async function generatePdfFromHtml({
htmlContent,
outputPath,
format = 'A4',
}: PdfRenderOptions): Promise<Buffer> {
const browser = await puppeteer.launch({
headless: true,
args: ['--no-sandbox', '--disable-setuid-sandbox'], // Bắt buộc trong container Linux Docker
});
try {
const page = await browser.newPage();
// Đặt nội dung HTML và chờ đến khi kết nối mạng ổn định
await page.setContent(htmlContent, { waitUntil: 'networkidle0' });
const pdfBuffer = await page.pdf({
format: format,
printBackground: true, // Quan trọng để hiển thị nền và màu sắc CSS
margin: {
top: '20mm',
right: '15mm',
bottom: '20mm',
left: '15mm',
},
path: outputPath,
});
return Buffer.from(pdfBuffer);
} finally {
await browser.close();
}
}
Quy Tắc CSS Cho PDF In Ấn
- Sử dụng CSS
@page: Kiểm soát kích thước giấy và lề với CSS tiêu chuẩn:CSS@page { size: A4 portrait; margin: 1.5cm; } - Tránh chia tách ngắt trang: Ngăn bảng biểu và tiêu đề bị chia nhỏ qua các trang bằng
page-break-inside: avoid;.
Nguyễn Đại Long
Tác GiảBackend Lead • Chuyên gia Kiến trúc Hệ thống Phân tán & Lưu trữ Đám mây
Hơn 4 năm kinh nghiệm thiết kế các hệ thống xử lý tệp tải lên thông lượng lớn, tối ưu hóa cơ sở dữ liệu và hạ tầng phân tán Cloudflare R2 / AWS S3. Người sáng lập FileDummy và Mạng lưới Hệ sinh thái NDL.
Bài viết này có hữu ích không?
Bấm Thích để ủng hộ tác giả và giúp bài viết lan tỏa tới cộng đồng lập trình viên.
Thảo Luận Kỹ Thuật & Đóng Góp Ý Kiến (0)
Chia sẻ kết quả benchmark, phản hồi các trường hợp biên hoặc đặt câu hỏi chuyên môn.
Chưa có bình luận nào. Hãy là lập trình viên đầu tiên bắt đầu cuộc thảo luận!
Câu Hỏi Thường Gặp (FAQ)
Which is faster: Puppeteer or Playwright for PDF generation?▾
Both use the same Chromium rendering engine, so PDF generation performance is nearly identical. Playwright offers a slightly cleaner API and better multi-browser support. Choose based on your existing toolchain.
How do I add page numbers in Puppeteer-generated PDFs?▾
Use the headerTemplate and footerTemplate options in page.pdf(). These accept HTML strings with special CSS classes: .pageNumber renders the current page, .totalPages renders the total. Inline styles are required since templates have isolated CSS scope.
How do I prevent page breaks mid-table?▾
Add page-break-inside: avoid (or break-inside: avoid) to table rows and sections. Use @media print CSS rules or pass custom CSS via page.addStyleTag().