PDF Generation
Puppeteer HTML-to-PDF (recommended for complex layouts)
import puppeteer from 'puppeteer';
async function generatePdf(html: string): Promise<Buffer> {
const browser = await puppeteer.launch({ headless: true });
const page = await browser.newPage();
await page.setContent(html, { waitUntil: 'networkidle0' });
const pdf = await page.pdf({
format: 'A4',
margin: { top: '20mm', bottom: '20mm', left: '15mm', right: '15mm' },
printBackground: true,
});
await browser.close();
return Buffer.from(pdf);
}
// Express endpoint
app.get('/api/invoice/:id/pdf', async (req, res) => {
const invoice = await getInvoice(req.params.id);
const html = renderInvoiceHtml(invoice);
const pdf = await generatePdf(html);
res.contentType('application/pdf');
res.setHeader('Content-Disposition', `attachment; filename="invoice-${invoice.number}.pdf"`);
res.send(pdf);
});
PDFKit (Node.js — programmatic)
import PDFDocument from 'pdfkit';
function createInvoicePdf(invoice: Invoice): Promise<Buffer> {
return new Promise((resolve) => {
const doc = new PDFDocument({ size: 'A4', margin: 50 });
const chunks: Buffer[] = [];
doc.on('data', (chunk) => chunks.push(chunk));
doc.on('end', () => resolve(Buffer.concat(chunks)));
// Header
doc.fontSize(20).text('INVOICE', { align: 'right' });
doc.fontSize(10).text(`#${invoice.number}`, { align: 'right' });
doc.moveDown();
// Table
doc.fontSize(12).text('Item', 50, doc.y);
doc.text('Amount', 400, doc.y - 12, { width: 100, align: 'right' });
doc.moveTo(50, doc.y).lineTo(550, doc.y).stroke();
for (const item of invoice.items) {
doc.text(item.description, 50, doc.y + 5);
doc.text(`$${item.amount.toFixed(2)}`, 400, doc.y - 12, { width: 100, align: 'right' });
}
doc.end();
});
}
@react-pdf/renderer (React components to PDF)
import { Document, Page, Text, View, StyleSheet, renderToBuffer } from '@react-pdf/renderer';
const styles = StyleSheet.create({
page: { padding: 30 },
title: { fontSize: 24, marginBottom: 20 },
row: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 5 },
});
function InvoicePdf({ invoice }: { invoice: Invoice }) {
return (
<Document>
<Page size="A4" style={styles.page}>
<Text style={styles.title}>Invoice #{invoice.number}</Text>
{invoice.items.map((item) => (
<View key={item.id} style={styles.row}>
<Text>{item.description}</Text>
<Text>${item.amount.toFixed(2)}</Text>
</View>
))}
</Page>
</Document>
);
}
// Server-side render
const buffer = await renderToBuffer(<InvoicePdf invoice={invoice} />);
Python (ReportLab)
from reportlab.lib.pagesizes import A4
from reportlab.platypus import SimpleDocTemplate, Table, Paragraph
from reportlab.lib.styles import getSampleStyleSheet
def generate_invoice_pdf(invoice: dict, output_path: str):
doc = SimpleDocTemplate(output_path, pagesize=A4)
styles = getSampleStyleSheet()
elements = []
elements.append(Paragraph(f"Invoice #{invoice['number']}", styles['Title']))
data = [['Item', 'Amount']]
for item in invoice['items']:
data.append([item['description'], f"${item['amount']:.2f}"])
table = Table(data, colWidths=[350, 100])
elements.append(table)
doc.build(elements)
Anti-Patterns
| Anti-Pattern |
Fix |
| New browser per PDF request |
Reuse browser instance, create new pages |
| No timeout on PDF generation |
Set page.setDefaultTimeout() and abort |
| Generating PDFs synchronously in request |
Use background job queue |
| Inline CSS in HTML templates |
Use embedded <style> or printBackground: true |
| No memory cleanup |
Close pages after use, limit concurrent generations |
Production Checklist
1---2name: pdf-generation3description: PDF generation and manipulation. Puppeteer/Playwright HTML-to-PDF, PDFKit, jsPDF, React-PDF, iText (Java), ReportLab (Python). Invoices, reports, and document generation. USE WHEN: user mentions "PDF", "generate PDF", "HTML to PDF", "invoice PDF", "PDFKit", "jsPDF", "Puppeteer PDF", "React-PDF", "iText", "ReportLab" DO NOT USE FOR: PDF parsing/reading - different concern; image generation - different format4---5# PDF Generation67## Puppeteer HTML-to-PDF (recommended for complex layouts)89```typescript10import puppeteer from 'puppeteer';1112async function generatePdf(html: string): Promise<Buffer> {13 const browser = await puppeteer.launch({ headless: true });14 const page = await browser.newPage();15 await page.setContent(html, { waitUntil: 'networkidle0' });1617 const pdf = await page.pdf({18 format: 'A4',19 margin: { top: '20mm', bottom: '20mm', left: '15mm', right: '15mm' },20 printBackground: true,21 });2223 await browser.close();24 return Buffer.from(pdf);25}2627// Express endpoint28app.get('/api/invoice/:id/pdf', async (req, res) => {29 const invoice = await getInvoice(req.params.id);30 const html = renderInvoiceHtml(invoice);31 const pdf = await generatePdf(html);32 res.contentType('application/pdf');33 res.setHeader('Content-Disposition', `attachment; filename="invoice-${invoice.number}.pdf"`);34 res.send(pdf);35});36```3738## PDFKit (Node.js — programmatic)3940```typescript41import PDFDocument from 'pdfkit';4243function createInvoicePdf(invoice: Invoice): Promise<Buffer> {44 return new Promise((resolve) => {45 const doc = new PDFDocument({ size: 'A4', margin: 50 });46 const chunks: Buffer[] = [];47 doc.on('data', (chunk) => chunks.push(chunk));48 doc.on('end', () => resolve(Buffer.concat(chunks)));4950 // Header51 doc.fontSize(20).text('INVOICE', { align: 'right' });52 doc.fontSize(10).text(`#${invoice.number}`, { align: 'right' });53 doc.moveDown();5455 // Table56 doc.fontSize(12).text('Item', 50, doc.y);57 doc.text('Amount', 400, doc.y - 12, { width: 100, align: 'right' });58 doc.moveTo(50, doc.y).lineTo(550, doc.y).stroke();5960 for (const item of invoice.items) {61 doc.text(item.description, 50, doc.y + 5);62 doc.text(`$${item.amount.toFixed(2)}`, 400, doc.y - 12, { width: 100, align: 'right' });63 }6465 doc.end();66 });67}68```6970## @react-pdf/renderer (React components to PDF)7172```tsx73import { Document, Page, Text, View, StyleSheet, renderToBuffer } from '@react-pdf/renderer';7475const styles = StyleSheet.create({76 page: { padding: 30 },77 title: { fontSize: 24, marginBottom: 20 },78 row: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 5 },79});8081function InvoicePdf({ invoice }: { invoice: Invoice }) {82 return (83 <Document>84 <Page size="A4" style={styles.page}>85 <Text style={styles.title}>Invoice #{invoice.number}</Text>86 {invoice.items.map((item) => (87 <View key={item.id} style={styles.row}>88 <Text>{item.description}</Text>89 <Text>${item.amount.toFixed(2)}</Text>90 </View>91 ))}92 </Page>93 </Document>94 );95}9697// Server-side render98const buffer = await renderToBuffer(<InvoicePdf invoice={invoice} />);99```100101## Python (ReportLab)102103```python104from reportlab.lib.pagesizes import A4105from reportlab.platypus import SimpleDocTemplate, Table, Paragraph106from reportlab.lib.styles import getSampleStyleSheet107108def generate_invoice_pdf(invoice: dict, output_path: str):109 doc = SimpleDocTemplate(output_path, pagesize=A4)110 styles = getSampleStyleSheet()111 elements = []112113 elements.append(Paragraph(f"Invoice #{invoice['number']}", styles['Title']))114115 data = [['Item', 'Amount']]116 for item in invoice['items']:117 data.append([item['description'], f"${item['amount']:.2f}"])118119 table = Table(data, colWidths=[350, 100])120 elements.append(table)121 doc.build(elements)122```123124## Anti-Patterns125126| Anti-Pattern | Fix |127|--------------|-----|128| New browser per PDF request | Reuse browser instance, create new pages |129| No timeout on PDF generation | Set `page.setDefaultTimeout()` and abort |130| Generating PDFs synchronously in request | Use background job queue |131| Inline CSS in HTML templates | Use embedded `<style>` or `printBackground: true` |132| No memory cleanup | Close pages after use, limit concurrent generations |133134## Production Checklist135136- [ ] Browser instance pooling (Puppeteer/Playwright)137- [ ] PDF generation in background queue138- [ ] Memory limits and timeouts configured139- [ ] Generated PDFs stored in object storage (S3)140- [ ] Content-Disposition header for downloads141- [ ] PDF/A compliance if archiving required