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

Question

说我的json是这样的:

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

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

我正在使用的浏览器是Chrome.

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

Answer 1

我使用这两个库实现了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-style dist目录中的cpexcel.js文件.

由于这种错误的:https://github.com/protobi/js-xlsx/issues/78它需要更换 xlsx-style/dist/cpexcel.js 与 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

[更新 - 23.08.2018]

这适用于最新的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

Answer 2

您可以将XLSX库用于Angular2 +.

以下提供的指南还有:

public export() {
    const readyToExport = [
      {id: 1, name: 'a'},
      {id: 2, name: 'b'},
      {id: 3, name: 'c'}
    ];

    const workBook = XLSX.utils.book_new(); // create a new blank book
    const workSheet = XLSX.utils.json_to_sheet(readyToExport);

    XLSX.utils.book_append_sheet(workBook, workSheet, 'data'); // add the worksheet to the book
    XLSX.writeFile(workBook, 'temp.xlsx'); // initiate a file download in browser
  }

使用Angular 5.2.0和XLSX 0.13.1进行测试

Answer 3

您使用Angular的事实并不是那么重要,尽管它确实为更多的lib打开了.

你基本上有两个选择.

1. 编写自己的json2csv转换器,这并不是那么难.您已经拥有JSON,可以转向JS对象,然后迭代每个对象并获取当前列的正确字段.
2. 您可以使用像https://github.com/zemirco/json2csv这样的lib 来为您完成.

此外,这个SO问题可能会回答您的问题如何将JSON转换为CSV格式并存储在变量中

CSV是类似Excel的程序的基本格式.除非你真的需要,否则不要乱用x​​ls(x).它会让你的大脑受伤.