Cómo exportar JSON a CSV o Excel – Angular 2

Solución:

Implementé la exportación de Excel 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

[Styling the cells]

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

1) Agregue las 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 es necesario 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

[UPDATE – 23.08.2018]

Esto funciona bien con el Angular 6 más nuevo.

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

Puede usar la biblioteca XLSX para Angular2 +.

Siguiendo la guía que se proporciona allí:

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

El hecho de que esté utilizando Angular no es tan importante, aunque 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 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 juegues con xls (x) a menos que realmente tengas que hacerlo. Hará que te duela el cerebro.

---

---

Utiliza Nuestro Buscador