import { Component, inject } from '@angular/core';
import { ExportAsService, ExportAsConfig } from 'ngx-export-as';

@Component({
  selector: 'app-export',
  templateUrl: './export.component.html',
  standalone: true,
  providers: [ExportAsService]  // Provide service in component
})
export class ExportComponent {
  private readonly exportAsService = inject(ExportAsService);
  
  // Your export methods here
}

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { ExportAsService } from 'ngx-export-as';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    ExportAsService  // Available throughout the app
  ]
};

import { Component, inject } from '@angular/core';
import { ExportAsService, ExportAsConfig } from 'ngx-export-as';

@Component({
  selector: 'app-export',
  templateUrl: './export.component.html',
  standalone: true
  // No need to provide service here - already in app.config
})
export class ExportComponent {
  private readonly exportAsService = inject(ExportAsService);
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ExportAsService } from 'ngx-export-as';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [ExportAsService],  // Add service to providers
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component, inject } from '@angular/core';
import { ExportAsService, ExportAsConfig } from 'ngx-export-as';

@Component({
  selector: 'app-export',
  templateUrl: './export.component.html'
})
export class ExportComponent {
  private readonly exportAsService = inject(ExportAsService);
}

exportAsPDF() {
  const exportConfig: ExportAsConfig = {
    type: 'pdf',
    elementIdOrContent: 'contentToExport'
  };
  
  this.exportAsService.save(exportConfig, 'MyReport').subscribe(() => {
    console.log('PDF export started');
  });
}

import { Component, inject } from '@angular/core';
import { ExportAsService, ExportAsConfig } from 'ngx-export-as';

@Component({
  selector: 'app-export',
  standalone: true,
  providers: [ExportAsService]
})
export class ExportComponent {
  private readonly exportAsService = inject(ExportAsService);
  
  exportToPDF() {
    const config: ExportAsConfig = {
      type: 'pdf',
      elementIdOrContent: 'myTableId'
    };
    
    this.exportAsService.save(config, 'my-report').subscribe(() => {
      // File download started
      console.log('Export completed!');
    });
  }
}

getBase64Content() {
  const config: ExportAsConfig = {
    type: 'png',
    elementIdOrContent: 'chartElement'
  };
  
  this.exportAsService.get(config).subscribe((content: string) => {
    // Use base64 content for upload, preview, etc.
    console.log('Base64 content:', content);
    
    // Example: Upload to server
    this.uploadToServer(content);
    
    // Example: Display in image tag
    this.imagePreview = content;
  });
}

exportToExcel() {
  const config: ExportAsConfig = {
    type: 'xlsx',
    elementIdOrContent: 'dataTable',
    options: {
      bookType: 'xlsx',
      sheet: 'Sheet1'
    }
  };
  
  this.exportAsService.save(config, 'data-export').subscribe(() => {
    console.log('Excel file downloaded');
  });
}

exportToJSON() {
  const config: ExportAsConfig = {
    type: 'json',
    elementIdOrContent: 'userTable'
  };
  
  // Note: JSON returns actual objects, not base64
  this.exportAsService.get(config).subscribe((data: any[]) => {
    console.log('JSON data:', data);
    // Process JSON data
    this.processData(data);
  });
}

export(format: 'pdf' | 'xlsx' | 'csv' | 'png') {
  const config: ExportAsConfig = {
    type: format,
    elementIdOrContent: 'reportContent'
  };
  
  this.exportAsService.save(config, `report-${Date.now()}`).subscribe(() => {
    console.log(`${format.toUpperCase()} export completed`);
  });
}

interface ExportAsConfig {
  type: SupportedExtensions;      // Required: Export format
  elementIdOrContent: string;     // Required: Element ID or content
  download?: boolean;             // Optional: Auto-download (used internally)
  fileName?: string;              // Optional: File name (used internally)
  options?: any;                  // Optional: Format-specific options
}

const config: ExportAsConfig = {
  type: 'pdf',
  elementIdOrContent: 'content',
  options: {
    margin: 10,
    filename: 'report.pdf',
    image: { type: 'jpeg', quality: 0.98 },
    html2canvas: { 
      scale: 2,
      useCORS: true,
      logging: false
    },
    jsPDF: { 
      unit: 'mm', 
      format: 'a4', 
      orientation: 'portrait' 
    },
    // Custom PDF manipulation
    pdfCallbackFn: (pdf) => {
      // Add page numbers
      const pageCount = pdf.internal.getNumberOfPages();
      for (let i = 1; i <= pageCount; i++) {
        pdf.setPage(i);
        pdf.setFontSize(10);
        pdf.text(`Page ${i} of ${pageCount}`, 
          pdf.internal.pageSize.getWidth() / 2, 
          pdf.internal.pageSize.getHeight() - 10,
          { align: 'center' }
        );
      }
    }
  }
};

const config: ExportAsConfig = {
  type: 'png',
  elementIdOrContent: 'chart',
  options: {
    scale: 2,                    // Higher quality (2x resolution)
    backgroundColor: '#ffffff',  // Background color
    logging: false,              // Disable console logs
    useCORS: true,              // Enable cross-origin images
    allowTaint: false,          // Prevent canvas tainting
    width: 1920,                // Custom width
    height: 1080                // Custom height
  }
};

const config: ExportAsConfig = {
  type: 'xlsx',
  elementIdOrContent: 'dataTable',
  options: {
    bookType: 'xlsx',
    sheet: 'Sales Data',
    raw: false,                  // Parse formatted values
    dateNF: 'yyyy-mm-dd',       // Date format
    cellDates: true             // Keep dates as date objects
  }
};

const config: ExportAsConfig = {
  type: 'docx',
  elementIdOrContent: 'document',
  options: {
    orientation: 'landscape',    // or 'portrait'
    margins: {
      top: '20',
      right: '20',
      bottom: '20',
      left: '20'
    }
  }
};

this.exportAsService.get(config).subscribe((data: any[]) => {
  // data is an array of objects
  console.log(data); // [{ name: 'John', age: '30' }, ...]
});

// Enable all BROWSER POLYFILLS for IE support
import 'core-js/es/symbol';
import 'core-js/es/object';
import 'core-js/es/function';
import 'core-js/es/parse-int';
import 'core-js/es/parse-float';
import 'core-js/es/number';
import 'core-js/es/math';
import 'core-js/es/string';
import 'core-js/es/date';
import 'core-js/es/array';
import 'core-js/es/regexp';
import 'core-js/es/map';
import 'core-js/es/weak-map';
import 'core-js/es/set';

import './polyfills/typedarray.js';

// app.module.ts
import { ExportAsModule } from 'ngx-export-as';

@NgModule({
  imports: [
    BrowserModule,
    ExportAsModule  // ❌ No longer available
  ]
})
export class AppModule { }

import { Component } from '@angular/core';
import { ExportAsService } from 'ngx-export-as';

@Component({
  selector: 'app-export',
  standalone: true,
  providers: [ExportAsService]  // ✅ Provide directly
})
export class ExportComponent {
  private readonly exportAsService = inject(ExportAsService);
}

// app.config.ts
import { ExportAsService } from 'ngx-export-as';

export const appConfig: ApplicationConfig = {
  providers: [ExportAsService]  // ✅ App-wide provider
};

// app.module.ts
import { ExportAsService } from 'ngx-export-as';

@NgModule({
  imports: [BrowserModule],
  providers: [ExportAsService]  // ✅ Add to providers instead
})
export class AppModule { }