关于javascript：如何将JSON导出为CSV或Excel-Angular 2


How to Export JSON to CSV or Excel - Angular 2

说我的json是这样的：

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

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

我使用的浏览器是Chrome。

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

相关讨论

我使用以下两个库实现了excel导出：文件服务器和xlsx。

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

1
2
npm install file-saver --save
npm install xlsx --save

ExcelService示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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)添加必需的依赖项

1
2
3
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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可以很好地工作。

1
yarn install xlsx --save

ExcelService示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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

相关讨论

您可以将XLSX库用于Angular2 +。

遵循那里提供的指南：

1
2
3
4
5
6
7
8
9
10
11
12
13
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测试

相关讨论

尽管使用Angular确实可以打开更多的库，但事实并非如此重要。

您基本上有两个选择。

  • 编写自己的json2csv转换器，这并不难。您已经有了JSON，可以将其转换为JS对象，然后仅遍历每个对象并获取当前列的正确字段。
  • 您可以使用像https://github.com/zemirco/json2csv这样的库来帮您。

    • 另外，这个SO问题可能回答了您的问题：如何将JSON转换为CSV格式并存储在变量中

    CSV是类似Excel的程序的基本格式。除非确实需要，否则不要弄乱xls(x)。它将使您的大脑受伤。

    相关讨论

    我认为这是正确的方式……为我工作！
    带了一个json数组

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    downloadFile(data: any, filename:string) {
        const replacer = (key, value) => value === null ? '' : value;
        const header = Object.keys(data[0]);
        let csv = data.map(row => header.map(fieldName => JSON.stringify(row[fieldName],replacer)).join(','));
        csv.unshift(header.join(','));
        let csvArray = csv.join('

    '    );
        var blob = new Blob([csvArray], {type: 'text/csv' })
        saveAs(blob, filename +".csv");
    }

    使用XLSX库将JSON转换为XLS文件并下载

    工作演示

    源链接

    方法

    包括图书馆

    1
    <script type="text/javascript" src="//unpkg.com/xlsx/dist/xlsx.full.min.js">

    JavaScript代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
        var createXLSLFormatObj = [];

        /* XLS Head Columns */
        var xlsHeader = ["EmployeeID","Full Name"];

        /* XLS Rows Data */
        var xlsRows = [{
               "EmployeeID":"EMP001",
               "FullName":"Jolly"
            },
            {
               "EmployeeID":"EMP002",
               "FullName":"Macias"
            },
            {
               "EmployeeID":"EMP003",
               "FullName":"Lucian"
            },
            {
               "EmployeeID":"EMP004",
               "FullName":"Blaze"
            },
            {
               "EmployeeID":"EMP005",
               "FullName":"Blossom"
            },
            {
               "EmployeeID":"EMP006",
               "FullName":"Kerry"
            },
            {
               "EmployeeID":"EMP007",
               "FullName":"Adele"
            },
            {
               "EmployeeID":"EMP008",
               "FullName":"Freaky"
            },
            {
               "EmployeeID":"EMP009",
               "FullName":"Brooke"
            },
            {
               "EmployeeID":"EMP010",
               "FullName":"FreakyJolly.Com"
            }
        ];


        createXLSLFormatObj.push(xlsHeader);
        $.each(xlsRows, function(index, value) {
            var innerRowData = [];
            $("tbody").append('<tr><td>' + value.EmployeeID + '</td><td>' + value.FullName + '</td></tr>');
            $.each(value, function(ind, val) {

                innerRowData.push(val);
            });
            createXLSLFormatObj.push(innerRowData);
        });


        /* File Name */
        var filename ="FreakyJSON_To_XLS.xlsx";

        /* Sheet Name */
        var ws_name ="FreakySheet";

        if (typeof console !== 'undefined') console.log(new Date());
        var wb = XLSX.utils.book_new(),
            ws = XLSX.utils.aoa_to_sheet(createXLSLFormatObj);

        /* Add worksheet to workbook */
        XLSX.utils.book_append_sheet(wb, ws, ws_name);

        /* Write workbook and Download */
        if (typeof console !== 'undefined') console.log(new Date());
        XLSX.writeFile(wb, filename);
        if (typeof console !== 'undefined') console.log(new Date());

    您可以引用此代码在ANgular 2组件中使用

    相关讨论

    您可以使用基于angular2的primeng将JSON导出为CSV格式，除了CSV格式外，Optoin availabel太多，无法应用于JSON，

    用于将JSON转换为CSV格式，请参见此处

    • http://www.primefaces.org/primeng/#/datatableexport

    更新的链接
    https://www.primefaces.org/primeng/#/datatable/export

    相关讨论

    我为此使用了angular2-csv库：https://www.npmjs.com/package/angular2-csv

    除了一个例外，这对我来说非常有效。存在一个已知问题(https://github.com/javiertelioz/angular2-csv/issues/10)，BOM字符插入了文件的开头，这会导致我的Excel版本显示垃圾字符。