Angular - Как экспортировать в Excel, используя xlsx и хранитель файлов в Angular - PullRequest
Новая
       21

Angular - Как экспортировать в Excel, используя xlsx и хранитель файлов в Angular

0 голосов
/ 24 июня 2019

Я разрабатываю приложение, которое будет экспортировать отображаемый результат в Excel.

модель

smsmo.ts 

import { User } from '../models/user';
import { Telco } from '../models/telco';
import { Package } from '../models/package';

export class Smsmo {
id: number;
msisdn: string;
message: string;
short_code_called: string;
packaged_id: string;
error_message: string;
error_code: string;
telco: string;
user_id: number;

user?: User;
telcoId?: Telco;
package?: Package;

constructor() {}
}

Услуга

excel.service.ts 

import { Injectable } from '@angular/core';
import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';

const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
const EXCEL_EXTENSION = '.xlsx';

@Injectable()
export class ExcelService {

constructor() { }

public exportAsExcelFile(json: any[], excelFileName: string): void {

// const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
// @ts-ignore

console.log('toexcel server --- 2',json);
//console.log('worksheet',worksheet);

// const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);

// console.log('worksheet ------2',worksheet);
const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
//const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'buffer' });
this.saveAsExcelFile(excelBuffer, excelFileName);
}

private saveAsExcelFile(buffer: any, fileName: string): void {
const data: Blob = new Blob([buffer], {
  type: EXCEL_TYPE
});
FileSaver.saveAs(data, fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION);

}
}

smsmo.service.ts 

import { Smsmo } from '../models/smsmo';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { environment } from 'src/environments/environment.prod';
import { HttpErrorHandler, HandleError } from '../shared/_services/http-handle-error.service';

@Injectable({
providedIn: 'root'
})

export class SmsmoService {

private readonly apiUrl = environment.apiUrl;
private smsmoUrl = this.apiUrl;
private handleError: HandleError;  

constructor(
private http: HttpClient,
httpErrorHandler: HttpErrorHandler ) {
  this.handleError = httpErrorHandler.createHandleError('SmsmoService');
}

/** GET smsmos from smsmos endpoint */
getSmsmos (): Observable<Smsmo[]> {
return this.http.get<Smsmo[]>(this.smsmoUrl + '/indexSmsmo')
.pipe(
  catchError(this.handleError('getSmsmos', []))
);
}

Примечание. GetSmsmos () - это функция, подключенная к smsmo.service, службе, которая извлекает данные из конечной точки laravel.

Проблема заключается в том, что я не знаю, как завершить экспорт sunAsXXX () в smsmo.component.ts. Это в основном для экспорта в Excel.

smsmo.component.ts 

import { Component, OnInit } from '@angular/core';
import { SmsmoService } from '../../../services/smsmo.service';
import {ExcelService} from '../../../services/excel.service';
import { Smsmo } from '../../../models/smsmo';

@Component({
  selector: 'app-sms-inbox',
  templateUrl: './sms-inbox.component.html',
  styleUrls: ['./sms-inbox.component.scss']
})

export class SmsInboxComponent implements OnInit {
 smsmos: Smsmo[];
 isLoading: Boolean = false;


constructor(private excelService:ExcelService , private smsmoService: 
SmsmoService) { }

 ngOnInit() {

    // Get Bulk SMS Inbox detail
    this.getSmsmos();    
 }

  exportAsXLSX():void {

    this.smsmoService.getSmsmos()

        });
}

  getSmsmos(): void {
  this.isLoading = true;
  this.smsmoService.getSmsmos()
  .subscribe(
    response => this.handleResponse(response),
    error => this.handleError(error));
 }
 }

На данный момент данные правильно отображаются в smsmo.component.html, но я хочу завершить exportAsXLSX (), который поможет мне экспортировать отображаемые данные. Как мне завершить код в exportAsXLSX (). Кроме того, как мне включить экспорт в Excel в ngOnInit (). Спасибо

...