PDF & Document Generation Expert (2026 Edition)
English | Bahasa Indonesia
English
Orchestration & Integration
email-notification-expert: PDF attachments in transactional emails.saas-billing: Invoice and receipt PDF generation.file-upload-media-expert: PDF storage and CDN delivery.
Description
Expert guide for generating PDFs and processing documents in web applications. Covers React PDF (@react-pdf/renderer), Puppeteer HTML-to-PDF, jsPDF, pdf-lib, invoice generation, report templates, digital signatures, and document parsing.
Trigger Conditions
- Generating invoices, receipts, or reports as PDFs.
- Converting HTML pages to downloadable PDFs.
- Building document templates with dynamic data.
- Implementing digital signatures on PDF documents.
Library Selection
| Library |
Approach |
Server/Client |
Best For |
| @react-pdf/renderer |
React components → PDF |
Both |
Complex layouts |
| Puppeteer |
HTML → PDF (headless Chrome) |
Server |
Pixel-perfect from HTML |
| jsPDF |
Programmatic canvas |
Client |
Simple client-side PDFs |
| pdf-lib |
Low-level PDF manipulation |
Both |
Modify existing PDFs |
// React PDF — Invoice generation
import { Document, Page, Text, View, StyleSheet, renderToBuffer } from '@react-pdf/renderer';
const styles = StyleSheet.create({
page: { padding: 40, fontSize: 12 },
header: { fontSize: 24, marginBottom: 20, color: '#8B5CF6' },
row: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 8 },
total: { fontSize: 16, fontWeight: 'bold', borderTopWidth: 1, paddingTop: 8, marginTop: 16 },
});
function InvoicePDF({ invoice }) {
return (
<Document>
<Page size="A4" style={styles.page}>
<Text style={styles.header}>Invoice #{invoice.number}</Text>
{invoice.items.map((item, i) => (
<View key={i} style={styles.row}>
<Text>{item.description}</Text>
<Text>${item.amount.toFixed(2)}</Text>
</View>
))}
<View style={styles.total}>
<Text>Total: ${invoice.total.toFixed(2)}</Text>
</View>
</Page>
</Document>
);
}
// Server-side render to buffer
export async function generateInvoicePDF(invoice) {
return await renderToBuffer(<InvoicePDF invoice={invoice} />);
}
Orchestration & Integration
email-notification-expert, saas-billing, file-upload-media-expert
Bahasa Indonesia
Deskripsi
Panduan ahli untuk menghasilkan PDF dan memproses dokumen di aplikasi web. Mencakup React PDF, Puppeteer HTML-to-PDF, jsPDF, dan pdf-lib.
Kondisi Pemicu
- Menghasilkan invoice, struk, atau laporan sebagai PDF.
- Mengkonversi halaman HTML ke PDF yang bisa diunduh.
- Membangun template dokumen dengan data dinamis.
1---2name: pdf-document-generation-expert3description: Expert guide for PDF generation and document processing (React PDF, Puppeteer, jsPDF, pdf-lib) / Panduan ahli generasi PDF dan pemrosesan dokumen (React PDF, Puppeteer, jsPDF, pdf-lib).4---56# PDF & Document Generation Expert (2026 Edition)78[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)910---1112<a name="english"></a>13## English1415### Orchestration & Integration16- **`email-notification-expert`**: PDF attachments in transactional emails.17- **`saas-billing`**: Invoice and receipt PDF generation.18- **`file-upload-media-expert`**: PDF storage and CDN delivery.1920### Description21Expert guide for generating PDFs and processing documents in web applications. Covers React PDF (@react-pdf/renderer), Puppeteer HTML-to-PDF, jsPDF, pdf-lib, invoice generation, report templates, digital signatures, and document parsing.2223### Trigger Conditions24- Generating invoices, receipts, or reports as PDFs.25- Converting HTML pages to downloadable PDFs.26- Building document templates with dynamic data.27- Implementing digital signatures on PDF documents.2829---3031### Library Selection3233| Library | Approach | Server/Client | Best For |34|---------|----------|---------------|----------|35| @react-pdf/renderer | React components → PDF | Both | Complex layouts |36| Puppeteer | HTML → PDF (headless Chrome) | Server | Pixel-perfect from HTML |37| jsPDF | Programmatic canvas | Client | Simple client-side PDFs |38| pdf-lib | Low-level PDF manipulation | Both | Modify existing PDFs |3940```tsx41// React PDF — Invoice generation42import { Document, Page, Text, View, StyleSheet, renderToBuffer } from '@react-pdf/renderer';4344const styles = StyleSheet.create({45 page: { padding: 40, fontSize: 12 },46 header: { fontSize: 24, marginBottom: 20, color: '#8B5CF6' },47 row: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 8 },48 total: { fontSize: 16, fontWeight: 'bold', borderTopWidth: 1, paddingTop: 8, marginTop: 16 },49});5051function InvoicePDF({ invoice }) {52 return (53 <Document>54 <Page size="A4" style={styles.page}>55 <Text style={styles.header}>Invoice #{invoice.number}</Text>56 {invoice.items.map((item, i) => (57 <View key={i} style={styles.row}>58 <Text>{item.description}</Text>59 <Text>${item.amount.toFixed(2)}</Text>60 </View>61 ))}62 <View style={styles.total}>63 <Text>Total: ${invoice.total.toFixed(2)}</Text>64 </View>65 </Page>66 </Document>67 );68}6970// Server-side render to buffer71export async function generateInvoicePDF(invoice) {72 return await renderToBuffer(<InvoicePDF invoice={invoice} />);73}74```7576## Orchestration & Integration77- `email-notification-expert`, `saas-billing`, `file-upload-media-expert`7879---8081<a name="bahasa-indonesia"></a>82## Bahasa Indonesia8384### Deskripsi85Panduan ahli untuk menghasilkan PDF dan memproses dokumen di aplikasi web. Mencakup React PDF, Puppeteer HTML-to-PDF, jsPDF, dan pdf-lib.8687### Kondisi Pemicu88- Menghasilkan invoice, struk, atau laporan sebagai PDF.89- Mengkonversi halaman HTML ke PDF yang bisa diunduh.90- Membangun template dokumen dengan data dinamis.
roedyrustam