json-report-pdf

Convert JSON data into beautiful, customizable PDF reports for Node.js, Express, NestJS, React, and Next.js.

Installation

npm install json-report-pdf
npm install -D pdfmake qrcode yaml zod

Note: pdfmake, qrcode, yaml, and zod are runtime dependencies.

Quick Start

import { generateReport } from "json-report-pdf";

await generateReport({
  title: "Monthly Sales Report",
  output: "./reports/sales.pdf",
  sections: [
    {
      title: "Summary",
      type: "cards",
      cards: [
        { title: "Total Orders", value: 1250 },
        { title: "Revenue", value: 45000, format: "currency" },
      ],
    },
    {
      title: "Sales",
      type: "table",
      columns: [
        { id: "id", label: "ID" },
        { id: "amount", label: "Amount", format: "currency" },
      ],
      data: salesData,
      alternating: true,
    },
  ],
});

Export Options

// File
await generateReport({ output: "./report.pdf", ... });

// Buffer
const buffer = await generateReport({ output: "buffer", ... });

// Base64 string
const base64 = await generateReport({ output: "base64", ... });

// Stream
const stream = await generateReport({ output: "stream", ... });

// Express Response
await generateReport({
  output: { type: "response", res: req.res, filename: "report.pdf" },
  ...
});

Themes

Built-in themes: corporate, modern, minimal, dark, invoice, analytics

await generateReport({
  theme: "dark",
  sections: [...],
  output: "buffer",
});

Custom theme:

await generateReport({
  theme: {
    colors: { primary: "#6366f1", secondary: "#8b5cf6" },
    typography: { fontFamily: "Inter", fontSize: 10 },
    pageSize: "A4",
    orientation: "portrait",
  },
  sections: [...],
  output: "buffer",
});

Sections

| Type | Description | |------|-------------| | paragraph | Simple text block | | table | Structured JSON table | | cards | Summary statistics cards | | chart | Chart image embed | | image | Image embed | | list | Bullet list | | divider | Horizontal divider |

Sections Configuration

Table

{
  type: "table",
  title: "Users",
  columns: [
    { id: "name", label: "Name", bold: true },
    { id: "status", label: "Status", render: (v) => v === "active" ? "Active" : "Inactive" },
  ],
  data: users,
  numbering: true,
  alternating: true,
}

Cards

{
  type: "cards",
  title: "Revenue",
  cards: [
    { title: "Total", value: 1200, icon: "revenue.png" },
    { title: "Growth", value: 15.4, format: "percentage", trend: { value: 15.4, direction: "up" } },
  ],
}

Report Metadata

await generateReport({
  title: "My Report",
  subtitle: "Monthly overview",
  author: "John Doe",
  company: "Acme Corp",
  reportNumber: "RPT-2024-001",
  version: "1.0.0",
  description: "Detailed sales analysis",
  output: "buffer",
});

Cover Page

await generateReport({
  title: "Sales Report",
  output: "buffer",
  cover: {
    enabled: true,
    companyLogo: "logo.png",
    backgroundImage: "cover-bg.jpg",
    generatedDate: true,
  },
  sections: [...],
});

Headers & Footers

await generateReport({
  title: "Report",
  output: "buffer",
  header: {
    enabled: true,
    pageTitle: "Sales",
    pageNumber: true,
    generationTime: true,
    leftText: "Internal",
  },
  footer: {
    enabled: true,
    copyright: "Acme Inc",
    website: "https://example.com",
    confidentialityLabel: "Confidential",
    pageNumber: true,
  },
});

Watermark

watermark: {
  enabled: true,
  text: "CONFIDENTIAL",
  opacity: 0.05,
  angle: 45,
  fontSize: 60,
}

CLI

npx json-report-pdf config.json
npx json-report-pdf config.yaml --watch
npx json-report-pdf config.json --output ./reports

React Component

import { PDFReport } from "json-report-pdf/react";

export default function ReportPage() {
  return (
    <PDFReport
      data={users}
      options={{ title: "Users Report", sections: [...] }}
      filename="users.pdf"
    />
  );
}

Express

app.get("/report", async (req, res) => {
  const pdf = await generateReport({
    output: { type: "response", res, filename: "sales.pdf" },
    title: "Sales",
    sections: [...],
    data: salesData,
  });
});

NestJS

@Get("report")
async getReport(@Res() res: Response) {
  const pdf = await this.reportService.generate({
    output: { type: "response", res: res, filename: "report.pdf" },
    title: "NestJS Report",
    sections: [...],
  });
}

License

MIT