javascript - ngx - Cómo exportar JSON a CSV o Excel-Angular 2

json to csv javascript

Question

Digamos que mi json es así:

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

¿Cómo puedo exportar este JSON a un archivo CSV o Excel en Angular2?

El navegador que estoy usando es Chrome.

Tal vez Angular2 no sea relevante, sin embargo, ¿hay algún complemento de terceros que pueda inyectarse en Angular2 y realizar esta tarea?

Answer 1

El hecho de que esté usando Angular no es tan importante, aunque sí se abre para algunas bibliotecas más.

Básicamente tienes dos opciones.

1. Escriba su propio convertidor json2csv, que no es tan difícil. Ya tiene el JSON, que puede convertir en objetos JS, y luego simplemente iterar sobre cada objeto y obtener el campo correcto para la columna actual.
2. Puede usar una biblioteca como https://github.com/zemirco/json2csv que lo hace por usted.

Además, esta pregunta SO probablemente responde a su pregunta Cómo convertir JSON a formato CSV y almacenar en una variable

CSV es el formato básico para programas similares a Excel. No te metas con xls (x) a menos que realmente tengas que hacerlo. Hará que te duela el cerebro.

Answer 2

Esta es la forma correcta, creo ... ¡funcionó para mí! tomó una matriz 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 3

Implementé excel export usando estas dos bibliotecas: file-server y xlsx .

Puede agregarlo a su proyecto existente con:

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

Ejemplo de 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);
  }

}

Puede encontrar un ejemplo de trabajo en mi github: https://github.com/luwojtaszek/ngx-excel-export

[Estilizando las células]

Si desea aplicar estilo a las celdas (por ejemplo, agregar ajuste de texto, centrar el contenido de la celda, etc.) puede hacerlo utilizando las bibliotecas de estilo xlsx y xlsx.

1) Agregar dependencias requeridas

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

2) Reemplace el archivo cpexcel.js en el directorio dist estilo xlsx.

Debido a este error: https://github.com/protobi/js-xlsx/issues/78 se requiere reemplazar xlsx-style/dist/cpexcel.js con xlsx/dist/cpexcel.js en el directorio node_modules.

3) Implementar 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);
  }

}

Ejemplo de trabajo: https://github.com/luwojtaszek/ngx-excel-export/tree/xlsx-style

[ACTUALIZACIÓN - 23.08.2018]

Esto funciona bien con el nuevo Angular 6.

yarn install xlsx --save

Ejemplo de 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));
  }
}

Actualicé mi repositorio: https://github.com/luwojtaszek/ngx-excel-export

Answer 4

Puede exportar su JSON a formato CSV utilizando primeng basado en angular2, aparte del formato CSV hay demasiadas opciones disponibles para aplicar en JSON,

para convertir su JSON en formato CSV, vea aquí

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

Enlace actualizado https://www.primefaces.org/primeng/#/datatable/export

Answer 5

Puede usar la biblioteca XLSX para Angular2 +.

Siguiendo la guía proporcionada 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
  }

Probado con Angular 5.2.0 y XLSX 0.13.1

Answer 6

Usé la biblioteca angular2-csv para esto: https://www.npmjs.com/package/angular2-csv

Esto funcionó muy bien para mí con una excepción. Existe un problema conocido ( https://github.com/javiertelioz/angular2-csv/issues/10 ) con el carácter BOM insertado al inicio del archivo que hace que se muestre un carácter basura con mi versión de Excel.

Answer 7

Use la biblioteca XLSX para convertir JSON en un archivo XLS y descargar

Demo trabajo

link fuente

Método

Incluir biblioteca

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

Código 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());

Puede referir este código para usar en el componente ANgular 2