下面是一个使用Angular xlsx库将多个JSON对象转换为工作表的示例代码:
首先,确保已安装xlsx
和@types/xlsx
库。
npm install xlsx @types/xlsx
然后,创建一个名为xlsx.service.ts
的服务文件,并添加以下代码:
import { Injectable } from '@angular/core';
import * as XLSX from 'xlsx';
@Injectable({
providedIn: 'root'
})
export class XlsxService {
constructor() { }
// 将多个JSON对象转换为工作表
public exportToExcel(jsonData: any[], fileName: string): void {
const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(jsonData);
const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
this.saveAsExcelFile(excelBuffer, fileName);
}
private saveAsExcelFile(buffer: any, fileName: string): void {
const data: Blob = new Blob([buffer], { type: 'application/octet-stream' });
const url: string = window.URL.createObjectURL(data);
const link: HTMLAnchorElement = document.createElement('a');
link.href = url;
link.download = fileName + '.xlsx';
link.click();
setTimeout(() => {
window.URL.revokeObjectURL(url);
document.body.removeChild(link);
}, 100);
}
}
在组件中,您可以使用XlsxService
来调用exportToExcel
方法并传递要转换的JSON数据和文件名。
import { Component } from '@angular/core';
import { XlsxService } from './xlsx.service';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
jsonData: any[] = [
{ name: 'John', age: 30, city: 'New York' },
{ name: 'Jane', age: 25, city: 'London' },
{ name: 'Bob', age: 35, city: 'Paris' }
];
constructor(private xlsxService: XlsxService) { }
exportToExcel(): void {
this.xlsxService.exportToExcel(this.jsonData, 'data');
}
}
在HTML模板中,我们创建了一个按钮,用于调用exportToExcel
方法。
当用户点击按钮时,exportToExcel
方法将调用XlsxService
的exportToExcel
方法,并将JSON数据和文件名传递给它。
这将导出一个名为data.xlsx
的文件,其中包含JSON数据的工作表。
上一篇:Angular 新手问题