如何在angular4中显示excel文件

在Angular 4中显示Excel文件，可以通过以下步骤实现：

1. 安装依赖：首先，确保已经安装了xlsx和file-saver这两个依赖包。可以使用以下命令进行安装：

npm install xlsx file-saver --save

1. 创建服务：创建一个名为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');

 }

}

1. 创建组件：创建一个名为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');

 }

}

1. 在模块中引入服务和组件：在需要使用Excel功能的模块中，将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，请根据相应版本的文档进行调整。