我使用这两个库实现了 excel 导出：file-server 和 xlsx。
您可以将其添加到现有项目中：
npm install file-saver --save
npm install xlsx --save
ExcelService 示例：
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);
const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
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);
}
}
您可以在我的 github 上找到工作示例：https://github.com/luwojtaszek/ngx-excel-export
[设置单元格样式]
如果您想为单元格设置样式（例如，添加文本环绕、居中单元格内容等），您可以使用 xlsx 和 xlsx 样式库来实现。
1) 添加所需的依赖项
npm install file-saver --save
npm install xlsx --save
npm install xlsx-style --save
2) 替换xlsx风格dist目录下的cpexcel.js文件。
由于这个错误：https://github.com/protobi/js-xlsx/issues/78 需要在 node_modules 目录中将 xlsx-style/dist/cpexcel.js 替换为 xlsx/dist/cpexcel.js。
3) 实现 ExcelService
import { Injectable } from '@angular/core';
import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';
import * as XLSXStyle from 'xlsx-style';
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);
this.wrapAndCenterCell(worksheet.B2);
const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
// Use XLSXStyle instead of XLSX write function which property writes cell styles.
const excelBuffer: any = XLSXStyle.write(workbook, { bookType: 'xlsx', type: 'buffer' });
this.saveAsExcelFile(excelBuffer, excelFileName);
}
private wrapAndCenterCell(cell: XLSX.CellObject) {
const wrapAndCenterCellStyle = { alignment: { wrapText: true, vertical: 'center', horizontal: 'center' } };
this.setCellStyle(cell, wrapAndCenterCellStyle);
}
private setCellStyle(cell: XLSX.CellObject, style: {}) {
cell.s = style;
}
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);
}
}
工作示例：https://github.com/luwojtaszek/ngx-excel-export/tree/xlsx-style
[更新 - 2018 年 8 月 23 日]
这适用于最新的 Angular 6。
yarn install xlsx --save
ExcelService 示例：
import {Injectable} from '@angular/core';
import * as XLSX from 'xlsx';
@Injectable()
export class ExcelService {
constructor() {
}
static toExportFileName(excelFileName: string): string {
return `${excelFileName}_export_${new Date().getTime()}.xlsx`;
}
public exportAsExcelFile(json: any[], excelFileName: string): void {
const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
const workbook: XLSX.WorkBook = {Sheets: {'data': worksheet}, SheetNames: ['data']};
XLSX.writeFile(workbook, ExcelService.toExportFileName(excelFileName));
}
}
我更新了我的仓库：https://github.com/luwojtaszek/ngx-excel-export