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

Question

说我的json是这样的：

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

如何将此 JSON 导出到 Angular2 中的 CSV 或 Excel 文件？

我使用的浏览器是Chrome。

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

Answer 1

您正在使用 Angular 的事实并不是那么重要，尽管它确实为更多的库打开了大门。

你基本上有两个选择。

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

此外，这个 SO 问题可能会回答您的问题 How to convert JSON to CSV format and store in a variable

CSV 是 Excel 类程序的基本格式。不要乱用 xls(x) 除非你真的必须这样做。会伤脑筋的。

Answer 2

您可以使用基于 angular2 的 primeng 将您的 JSON 导出为 CSV 格式，除了 CSV 格式之外，还有太多可用的选项可以应用于 JSON，

要将 JSON 转换为 CSV 格式，请参阅此处

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

已更新link https://www.primefaces.org/primeng/#/datatable/export

Answer 3

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

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

版本中显示垃圾字符

Answer 4

我使用以下两个库实现了 excel 导出：file-server and 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

[设置单元格样式]

如果您想设置单元格的样式（f.e。添加文本换行、单元格内容居中等），您可以使用 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

Answer 5

您可以将 XLSX 库用于 Angular2+。

按照提供的指南进行操作 there:

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 6

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

工作Demo

来源link

方法

包含库

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

JavaScript代码

    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 Component

中使用

Answer 7

这是我认为的正确方式...对我有用！拿了一个json数组

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('\r\n');
    var blob = new Blob([csvArray], {type: 'text/csv' })
    saveAs(blob, filename + ".csv");
}

Answer 8

您可以使用这个简单的代码从 JSON 导出到 CSV。此代码解决了许多基本问题，例如分隔符问题、自定义标题、跳过空列和添加 - 代替特定列的空数据。请参阅此 github link 以解决 Angular.

中有关 CSV 导出的所有问题

https://github.com/marvin-aroza/Angular-csv-export

将此视为您 JSON 数据

jsonData : any = [{
    name : 'Berlin',
    age : '45',
    country : 'Spain',
    phone : '896514326'
  },
  {
    name : 'Professor',
    age : '42',
    country : 'spain'
  },
  {
    name : 'Tokyo',
    age : '35',
    phone : '854668244'
  },
  {
    name : 'Helsinki',
    phone : '35863297'
  }];

您可以使用这些功能下载 csv

exportCsv() {
    this.downloadFile(this.jsonData);
  }

  downloadFile(data, filename = 'data') {
    let arrHeader = ["name", "age", "country", "phone"];
    let csvData = this.ConvertToCSV(data, arrHeader);
    console.log(csvData)
    let blob = new Blob(['\ufeff' + csvData], { type: 'text/csv;charset=utf-8;' });
    let dwldLink = document.createElement("a");
    let url = URL.createObjectURL(blob);
    let isSafariBrowser = navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1;
    if (isSafariBrowser) {  //if Safari open in new window to save file with random filename.
      dwldLink.setAttribute("target", "_blank");
    }
    dwldLink.setAttribute("href", url);
    dwldLink.setAttribute("download", "sample.csv");
    dwldLink.style.visibility = "hidden";
    document.body.appendChild(dwldLink);
    dwldLink.click();
    document.body.removeChild(dwldLink);
  }

要编辑 CSV 格式，您可以添加此功能

ConvertToCSV(objArray, headerList) {
    console.log(objArray);
    console.log(headerList);
    let array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
    let str = '';
    let row = 'S.No,';

    let newHeaders = ["Name", "Age", "Country", "Phone"];

    for (let index in newHeaders) {
      row += newHeaders[index] + ',';
    }
    row = row.slice(0, -1);
    str += row + '\r\n';
    for (let i = 0; i < array.length; i++) {
      let line = (i + 1) + '';
      for (let index in headerList) {
        let head = headerList[index];

        line += ',' + this.strRep(array[i][head]);
      }
      str += line + '\r\n';
    }
    return str;
  }

对于带有逗号的值，您可以使用此函数删除逗号并将其视为一个值

strRep(data) {
    if(typeof data == "string") {
      let newData = data.replace(/,/g, " ");
       return newData;
    }
    else if(typeof data == "undefined") {
      return "-";
    }
    else if(typeof data == "number") {
      return  data.toString();
    }
    else {
      return data;
    }
  }

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

How to Export JSON to CSV or Excel - Angular 2

javascript

export-to-excel

export-to-csv

angular