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

Posted

技术标签:

【中文标题】如何将 JSON 导出为 CSV 或 Excel - Angular 2【英文标题】:How to Export JSON to CSV or Excel - Angular 2 【发布时间】:2017-01-03 18:27:21 【问题描述】:

说我的json是这样的:

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

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

我使用的浏览器是 Chrome。

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

【问题讨论】:

有几种方法可以导出为 CSV 或 Excel;您使用 Angular 的事实可能无关紧要。更重要的是您使用的是什么浏览器,因为客户端创建的文件在浏览器之间不是很统一。 我用的是 Chrome 浏览器,你有什么第三方插件可以用来做这样的任务吗? 您可以使用插件 ngCsv - 使用 AngularJS 导出为 CSV。链接在这里:ngmodules.org/modules/ng-csv @TaiNguyen ng-csv 需要 ngSanitize,它在 angular2 中不可用。 @Vicheanak 您可以使用 nodejs 将 json 转换为 csv。然后 angularjs2 调用 http post josn 并获取文件 scv。我想是的 【参考方案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风格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

【讨论】:

你让它在你的项目上运行了吗? 嗨,是否可以自动换行。 您可以使用 xlsx 和 xlsx 样式的库来执行此操作。我用说明更新了我的帖子。您还可以在我的 GitHub 上找到工作示例。 @luwojtaszek,我尝试使用上述方法创建一个 excel,它正在创建一个 excel 文件,但我无法打开它说文件已损坏。 修改行为 const excelBuffer: any = XLSX.write(workbook, bookType: 'xlsx', type: 'array' );【参考方案2】:

您可以将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 测试

【讨论】:

谢谢你救了我的命。 如何设置单元格样式? @MohammadZeshan,官方包描述中基本上有关于格式化的参考。我建议创建一个新问题,因为这超出了主题范围。【参考方案3】:

您使用 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)。它会让你的大脑受伤。

【讨论】:

您可以使用为您生成 XLS 的后端导出到 XLS。例如。对于 php,有 PHPExcel(不会像直接从浏览器中那样伤害你的大脑)【参考方案4】:

这是我认为的正确方式...为我工作! 取了一个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");

【讨论】:

【参考方案5】:

您可以使用这个简单的代码从 JSON 导出到 CSV。此代码解决了许多基本问题,例如分隔符问题、自定义标题、跳过空列并添加 - 代替特定列的空数据。请参阅此 github 链接以解决有关 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;
    
  

【讨论】:

【参考方案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": "***e"
        ,
        
            "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 组件中使用

【讨论】:

@RajRajeshwarSinghRathore 检查它对我来说工作正常,请再试一次并单击“下载 XLS 文件”按钮 是的,它现在正在工作。可能当时有些问题。谢谢 如果你已经有了正确格式的 json,只需使用 json_to_sheet 而不是 aoa_to_sheet【参考方案7】:

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

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

【讨论】:

【参考方案8】:

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

要将您的 JSON 转换为 CSV 格式,请参见此处

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

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

【讨论】:

Primeng DataTable Export 不导出模板列,这是我正在寻找另一种解决方案的原因。也不能对模板列进行排序。

以上是关于如何将 JSON 导出为 CSV 或 Excel - Angular 2的主要内容,如果未能解决你的问题,请参考以下文章

如何在 vuetify 数据表上添加导出 csv、excel 按钮?

如何使用Python asammdf将MDF导出到Excel或CSV

jQuery插件,用于将html表导出为JSON、XML、CSV、TSV、TXT、SQL、Word、Excel、PNG和PDF

SAS将数据集导出为csv或excel,保留换行符

如何将带有中文字符的 Excel 文件导出为 CSV?

将php数组数据导出为CSV或Excel