PDF & Document Generation Expert (2026 Edition)

English | Bahasa Indonesia

---

<a name="english"></a>

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

---

<a name="bahasa-indonesia"></a>

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.