在Angular 4中显示Excel文件,可以通过以下步骤实现:
xlsx
和file-saver
这两个依赖包。可以使用以下命令进行安装:
npm install xlsx file-saver --save
ExcelService
的服务,用于处理Excel文件的读取和显示。在该服务中,导入xlsx
和file-saver
依赖,并添加以下方法:
import { Injectable } from '@angular/core';
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';
@Injectable({
providedIn: 'root'
})
export class ExcelService {
constructor() { }
exportToExcel(data: any[], fileName: string): void {
const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(data);
const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
const fileData: Blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });
saveAs(fileData, fileName + '.xlsx');
}
}
ExcelComponent
的组件,用于显示Excel文件。在该组件中,导入ExcelService
并添加以下代码:
import { Component } from '@angular/core';
import { ExcelService } from './excel.service';
@Component({
selector: 'app-excel',
template: `
<button (click)="exportToExcel()">Export to Excel</button>
`
})
export class ExcelComponent {
constructor(private excelService: ExcelService) { }
exportToExcel(): void {
const data = [
{ name: 'John', age: 30, city: 'New York' },
{ name: 'Jane', age: 25, city: 'London' },
{ name: 'Bob', age: 35, city: 'Paris' }
];
this.excelService.exportToExcel(data, 'sample');
}
}
ExcelService
和ExcelComponent
添加到providers
和declarations
数组中。
import { NgModule } from '@angular/core';
import { ExcelService } from './excel.service';
import { ExcelComponent } from './excel.component';
@NgModule({
declarations: [ExcelComponent],
providers: [ExcelService]
})
export class AppModule { }
现在,当点击"Export to Excel"按钮时,将会生成一个名为"sample.xlsx"的Excel文件,并下载到本地。文件中包含了data
数组中的数据。你可以根据实际需求修改数据和文件名。
请注意,以上代码示例仅适用于在Angular 4中显示Excel文件。如果你使用的是其他版本的Angular,请根据相应版本的文档进行调整。
领取专属 10元无门槛券
手把手带您无忧上云