The core library for generate PDFs in the browser

 1. jspdf

This is the core library that lets you generate PDFs in the browser (client-side).

Key Features:

• Create PDF documents directly in the browser (no backend needed).
• Supports text, images, lines, rectangles, circles etc.
• Add fonts, font sizes, colors.
• Insert images (PNG, JPEG, WebP).
• Multiple pages: auto-create new pages when text overflows.
• Orientation & format: landscape/portrait, A4/Letter/custom sizes.
• Save PDF with doc.save("filename.pdf").
• Export PDF as blob, base64, or download.

Example:

const doc = new jsPDF();
doc.text("Hello World!", 10, 10);
doc.save("example.pdf");

2. jspdf-autotable

This is a plugin for jspdf that makes it easy to create tables in your PDF (like invoices, reports, order summaries).

Key Features:

• Automatically creates tables with rows and columns.
• Supports headers, footers, and multiple pages.
• Styling options:
• headStyles (background, text color, font size, bold headers).
• bodyStyles (row styling).
• alternateRowStyles (zebra stripes).
• Column alignment: left, center, right.
• Dynamic height: if content is long, it wraps.
• Automatic pagination when table is too long.
• Can hook into events (didDrawCell) to customize.

Example:

import autoTable from "jspdf-autotable";

autoTable(doc, {
  head: [["Name", "Email", "Country"]],
  body: [
    ["John Doe", "john@example.com", "USA"],
    ["Jane Smith", "jane@example.com", "UK"],
  ],
});

Why they are used together in your project

• jspdf → handles the PDF structure (logo, company details, invoice title, etc.).
• jspdf-autotable → makes the product list & order summary tables neat and auto-formatted.

This combo is widely used for Invoices, Bills, Reports, Receipts, Certificates in React/Next.js projects.

Since your project is an E-commerce app, these libraries are perfect because they:

• Generate invoices dynamically from order data.
• Ensure layout is consistent across browsers/devices.
• Work offline (client-side, no API call needed).

Do you want me to make you a side-by-side example showing:

1. An invoice made with only jspdf
2. An invoice made with jspdf + autotable