如何将 JSON 导出到 CSV 或 Excel - Angular 2

假设我的 json 是这样的：

var readyToExport = [
   {id: 1, name: 'a'},
   {id: 2, name: 'b'},
   {id: 3, name: 'c'}
];

如何在 Angular2 中将此 JSON 导出为 CSV 或 Excel 文件？

我使用的浏览器是Chrome。

也许 Angular2 不相关，但是，是否有任何第三方插件可以注入 Angular2 并执行此任务？

我使用这两个库实现了excel导出：文件服务器 https://www.npmjs.com/package/file-saver and xlsx https://www.npmjs.com/package/xlsx.

您可以使用以下命令将其添加到现有项目中：

npm install file-saver --save
npm install xlsx --save

Excel服务示例：

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 https://github.com/luwojtaszek/ngx-excel-export

[设置单元格样式]

如果您想设置单元格的样式（例如添加文本换行、居中单元格内容等），您可以使用 xlsx 和 xlsx-style 库来完成此操作。

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 https://github.com/protobi/js-xlsx/issues/78需要更换xlsx-style/dist/cpexcel.js with xlsx/dist/cpexcel.js在node_modules目录中。

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 https://github.com/luwojtaszek/ngx-excel-export/tree/xlsx-style

[更新 - 2018 年 8 月 23 日]

这适用于最新的 Angular 6。

yarn install xlsx --save

Excel服务示例：

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 https://github.com/luwojtaszek/ngx-excel-export