ngx-xahi-exporter 🚀

The most complete Angular export library — PDF reports, Enterprise Excel sheets, Thermal POS receipts, and CSV files — all with a single method call.

🔗 View Source Code on GitHub

🖼️ Output Preview

📸 Real screenshots — check the Live Demo StackBlitz

✨ Features at a Glance

| Feature | Description | |---|---| | 📄 Smart PDF | Auto layout, logo branding, product images, page numbers, footer | | 📊 Enterprise Excel | Frozen headers, alternating row colors, auto-filter, image embedding | | 🧾 Thermal POS (80mm) | QR code, invoice details, bill discount, change calculation | | 📁 CSV Export | Styled CSV via ExcelJS with proper encoding | | 🖼️ Image Ready | Embeds images from URLs directly into PDF & Excel cells | | 🎨 Theme Color | Pass any hex color — headers and accents update automatically | | ⚡ Zero Config UI | Just pass your data array — no complex setup required | | 🔁 Auto File Naming | Auto timestamps filename if none is provided |

📦 Installation

npm install ngx-xahi-exporter exceljs jspdf jspdf-autotable

⚠️ Peer Dependencies: @angular/core >=15.0.0 and @angular/common >=15.0.0 are required.

🚀 Quick Start

Step 1 — Inject the Service

import { XahiExporterService } from 'ngx-xahi-exporter';

export class MyComponent {
  constructor(private exporter: XahiExporterService) {}
}

That's it. No module imports, no forRoot(). It's providedIn: 'root' automatically.

📄 Export to PDF — Professional Report

Best for monthly reports, invoices, and official documents.
Supports company logo, product images, theme color, footer text, and auto page numbers.

import { XahiExporterService, XahiConfig } from 'ngx-xahi-exporter';

exportPDF() {
  const config: XahiConfig = {
    type: 'PDF',
    fileName: 'Sales_Report_2024',
    title: 'Monthly Sales Report',
    themeColor: '#1a5f7a',
    logo: 'https://your-domain.com/logo.png',
    footerText: 'Confidential | Generated by Xahi Smart System',
    data: [
      { id: 1, product: 'iPhone 15',   price: 999,  img: 'https://example.com/iphone.jpg' },
      { id: 2, product: 'MacBook Pro', price: 2499, img: 'https://example.com/mac.jpg'    }
    ]
  };

  this.exporter.export(config);
}

PDF Output includes:

• Auto-sized landscape layout based on your column count
• Company logo (top-left) + report title
• Full data table with themed header row
• Product images embedded in cells (for rows with img / image field)
• Footer with custom text + Page X of Y

📊 Export to Excel — Enterprise Standard

Not just a basic spreadsheet. Includes frozen header row, alternating row colors, auto-filter dropdowns, and embedded product images.

exportExcel() {
  const config: XahiConfig = {
    type: 'EXCEL',
    fileName: 'Inventory_Sheet',
    themeColor: '#27ae60',
    data: [
      { item: 'Laptop',       stock: 45,  category: 'Electronics', img: 'https://example.com/laptop.jpg' },
      { item: 'Office Chair', stock: 120, category: 'Furniture',   img: 'https://example.com/chair.jpg'  }
    ]
  };

  this.exporter.export(config);
}

Excel Output includes:

• Themed header with bold white text (Segoe UI font)
• Alternating row shading (#F9FAFB on odd rows)
• Auto column width (based on longest cell content)
• Frozen top row (scrollable data, static header)
• Auto-filter on all columns
• Images embedded in cells (up to 200 rows — performance safe)

💡 Image Tip: If your data has a field named img or image with an HTTP URL, it will be automatically embedded as a thumbnail in that column.

🧾 Export to POS — Thermal Receipt (80mm)

Designed specifically for retail, restaurant, and POS software.
Outputs a clean 80mm receipt PDF with QR code, invoice details, and auto-calculated change.

import { XahiExporterService, XahiPOSConfig } from 'ngx-xahi-exporter';

exportPOS() {
  const posConfig: XahiPOSConfig = {
    type:            'POS',
    fileName:        'Receipt_0098',
    title:           'XAHI SUPER MART',
    companyAddress:  'Saddar, Karachi, Pakistan',
    companyPhone:    '0300-1234567',
    invoiceNo:       'INV-0098',
    customerName:    'Muhammad Ali',
    customerPhone:   '0321-9876543',
    qrCode:          'https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=INV-0098',
    receivedAmount:  2000,
    billDiscount:    150,
    footerText:      'Thank you for shopping! Please come again.',
    data: [
      { item_name: 'Cooking Oil 1L', qty: 1, price: 650, discount: 0,   total: 650 },
      { item_name: 'Sugar 5kg',      qty: 2, price: 450, discount: 50,  total: 850 },
      { item_name: 'Bread',          qty: 3, price: 80,  discount: 0,   total: 240 }
    ]
  };

  this.exporter.export(posConfig);
}

POS Receipt Output includes:

• QR code (top-left) + shop name & address side by side
• Invoice number + auto date + customer name + phone
• Item table: Name | Qty | Price | Discount | Total
• Sub Total → Bill Discount → Grand Total
• Received Amount + Change to Return (auto-calculated)
• Custom footer + developer credit link

📁 Export to CSV

Clean, structured CSV file — ideal for data backups and spreadsheet imports.

exportCSV() {
  const config: XahiConfig = {
    type: 'CSV',
    fileName: 'Products_Export',
    themeColor: '#8e44ad',
    data: [
      { id: 1, name: 'Product A', price: 500 },
      { id: 2, name: 'Product B', price: 750 }
    ]
  };

  this.exporter.export(config);
}

⚙️ Configuration Reference

XahiConfig (PDF, EXCEL, CSV)

| Property | Type | Required | Description | |---|---|---|---| | type | 'PDF' \| 'EXCEL' \| 'CSV' \| 'POS' | ✅ Yes | Export format | | data | any[] | ✅ Yes | Array of objects to export | | fileName | string | ❌ No | Output filename (auto-generated if omitted) | | title | string | ❌ No | Report title shown in PDF header | | themeColor | string | ❌ No | Hex color for header/branding e.g. #1a5f7a | | logo | string | ❌ No | URL of company logo for PDF reports | | footerText | string | ❌ No | Custom footer text | | wrapText | boolean | ❌ No | Wrap long text in PDF cells | | repeatHeader | boolean | ❌ No | Repeat column headers on every PDF page |

XahiPOSConfig (POS only — extends XahiConfig)

| Property | Type | Description | |---|---|---| | qrCode | string | URL of QR code image to display on receipt | | invoiceNo | string | Invoice / receipt number | | customerName | string | Customer full name | | customerPhone | string | Customer phone number | | companyAddress | string | Your shop/company address | | companyPhone | string | Your shop/company phone | | billDiscount | number | Flat discount applied to entire bill | | receivedAmount | number | Amount received from customer (for change calculation) |

🖼️ Image Fields — Auto Detection

The library automatically detects image columns in your data. No extra config needed.

| Field Name | Detected? | |---|---| | img | ✅ Yes | | image | ✅ Yes | | anyOtherField | ❌ No |

Images must be publicly accessible HTTP/HTTPS URLs. Base64 strings are not supported in the current version.

⚠️ For Excel: Images are only embedded when data.length <= 200 to protect performance.

🧠 How It Works Internally

XahiExporterService.export(config)
        │
        ├─ type: 'PDF'   → generatePDF()   → jsPDF + jspdf-autotable
        ├─ type: 'EXCEL' → generateExcel() → ExcelJS
        ├─ type: 'CSV'   → generateCSV()   → ExcelJS (xlsx buffer → .xlsx)
        └─ type: 'POS'   → generatePOS()   → jsPDF (80mm format)

All handlers are lazy-loaded using dynamic import() — so you only pay the bundle cost when the export is actually triggered.

🛠️ Peer Dependency Versions

| Package | Version | |---|---| | @angular/core | >=15.0.0 | | @angular/common | >=15.0.0 | | exceljs | Latest | | jspdf | Latest | | jspdf-autotable | Latest |

❓ FAQ

Q: Does it work with Angular standalone components?
Yes. The service is providedIn: 'root' — it works with both standalone and module-based architectures.

Q: Can I use it with local image paths?
Only HTTP/HTTPS URLs are supported for image embedding. Local paths (assets/...) do not work due to browser CORS restrictions in canvas/fetch.

Q: What happens if an image URL fails to load?
The library silently skips the failed image and continues generating the file — no crash, no error shown to user.

Q: Can I customize column widths?
Not yet via config — column widths are auto-calculated based on content length. Manual overrides are planned for a future release.

Q: Does this work server-side (SSR)?
No. This library uses browser APIs (window, document, fetch, canvas). SSR is not currently supported.

📋 Complete Example Component

import { Component } from '@angular/core';
import { XahiExporterService, XahiConfig, XahiPOSConfig } from 'ngx-xahi-exporter';

@Component({
  selector: 'app-export-demo',
  template: `
    <button (click)="exportPDF()">Export PDF</button>
    <button (click)="exportExcel()">Export Excel</button>
    <button (click)="exportCSV()">Export CSV</button>
    <button (click)="exportPOS()">Print Receipt</button>
  `
})
export class ExportDemoComponent {

  constructor(private exporter: XahiExporterService) {}

  sampleData = [
    { id: 1, name: 'Product A', price: 500,  stock: 20, img: 'https://picsum.photos/100' },
    { id: 2, name: 'Product B', price: 750,  stock: 15, img: 'https://picsum.photos/101' },
    { id: 3, name: 'Product C', price: 1200, stock: 8,  img: 'https://picsum.photos/102' }
  ];

  exportPDF() {
    this.exporter.export({
      type: 'PDF',
      fileName: 'Product_Report',
      title: 'Product Catalog',
      themeColor: '#1a5f7a',
      footerText: '© 2025 My Company | Confidential',
      data: this.sampleData
    });
  }

  exportExcel() {
    this.exporter.export({
      type: 'EXCEL',
      fileName: 'Product_Sheet',
      themeColor: '#27ae60',
      data: this.sampleData
    });
  }

  exportCSV() {
    this.exporter.export({
      type: 'CSV',
      fileName: 'Product_Export',
      data: this.sampleData
    });
  }

  exportPOS() {
    const receipt: XahiPOSConfig = {
      type: 'POS',
      title: 'MY SHOP NAME',
      companyAddress: 'Main Boulevard, Lahore',
      companyPhone: '042-1234567',
      invoiceNo: 'INV-001',
      customerName: 'Ali Hassan',
      customerPhone: '0300-0000000',
      qrCode: 'https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=INV-001',
      receivedAmount: 3000,
      billDiscount: 200,
      footerText: 'Thank you! Visit again.',
      data: [
        { item_name: 'Item A', qty: 2, price: 500, discount: 0,   total: 1000 },
        { item_name: 'Item B', qty: 1, price: 750, discount: 50,  total: 700  }
      ]
    };
    this.exporter.export(receipt);
  }
}

🌟 Star & Support

Built with ❤️ by Muhammad Ali
Angular Developer | Open Source Enthusiast

© 2025 Xahi Solutions | MIT Licensed