Question

我正在开发一个将显示结果导出到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端点获取数据。

问题是我不知道如何在smsmo.component.ts中完成sunExportAsXLSX（）函数。这基本上是用于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（）中。谢谢

Angular-如何在Angular中使用xlsx和文件保护程序导出到Excel

0 个答案: