web-dev-qa-db-fra.com

Comment exporter du JSON au format CSV ou Excel - Angular 2

Dites que mon json est comme ça: 

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

Comment puis-je exporter ce fichier JSON au format CSV ou Excel dans Angular2?

Le navigateur que j'utilise est Chrome. 

Peut-être que Angular2 n'est pas pertinent, cependant, existe-t-il un plugin tiers qui peut être injecté dans Angular2 et effectuer cette tâche? 

javascriptangularexport-to-excelexport-to-csv
18
Vicheanak

Le fait que vous utilisiez Angular n'est pas si important que cela, bien que cela ouvre la porte à quelques libs supplémentaires.

Vous avez essentiellement deux options.

  1. Ecrivez votre propre convertisseur json2csv, ce qui n’est pas si difficile. Vous disposez déjà du JSON, que vous pouvez utiliser pour les objets JS, puis effectuez une itération sur chaque objet et obtenez le champ approprié pour la colonne en cours.
  2. Vous pouvez utiliser une bibliothèque comme https://github.com/zemirco/json2csv qui le fait pour vous.

En outre, cette question SO répond probablement à votre question Comment convertir un fichier JSON au format CSV et le stocker dans une variable

CSV est le format de base pour les programmes de type Excel. Ne jouez pas avec xls (x) sauf si vous devez le faire vraiment. Cela fera mal à votre cerveau.

11
Chewtoy

J'ai implémenté l'export Excel en utilisant ces deux bibliothèques: serveur de fichiers et xlsx .

Vous pouvez l'ajouter à votre projet existant avec:

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

Exemple 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);
  }

}

Vous pouvez trouver des exemples de travail sur mon github: https://github.com/luwojtaszek/ngx-Excel-export

[Styling the cells]

Si vous souhaitez styliser les cellules (par exemple, ajouter du retour à la ligne, centrer le contenu des cellules, etc.), vous pouvez le faire en utilisant des bibliothèques de style xlsx et xlsx.

1) Ajouter les dépendances requises

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

2) Remplacez le fichier cpexcel.js dans le répertoire dist de style xlsx.

A cause de ce bogue: https://github.com/protobi/js-xlsx/issues/78 il est nécessaire de remplacer xlsx-style/dist/cpexcel.js par xlsx/dist/cpexcel.js dans le répertoire node_modules.

3) implémenter 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);
  }

}

Exemple de travail: https://github.com/luwojtaszek/ngx-Excel-export/tree/xlsx-style

[MISE À JOUR - 23.08.2018]

Cela fonctionne bien avec le plus récent angulaire 6.

yarn install xlsx --save

Exemple 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));
  }
}

J'ai mis à jour mon référentiel: https://github.com/luwojtaszek/ngx-Excel-export

35
luwojtaszek

Vous pouvez utiliser XLSX library pour Angular2 +.

En suivant le guide fourni là :

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
  }

Testé avec Angular 5.2.0 et XLSX 0.13.1

7
debugger

C’est la bonne façon, je pense… a fonctionné pour moi!

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");
}
2
Subham Debnath

Vous pouvez exporter votre format JSON au format CSV à l’aide de primeng basé sur angular2. Outre le format CSV, le nombre de possibilités d’utilisation est trop élevé pour pouvoir être appliqué sur JSON

pour convertir votre JSON au format CSV, voir ici

Lien mis à jourhttps://www.primefaces.org/primeng/#/datatable/export

1
Pardeep Jain

Utilisez la bibliothèque XLSX pour convertir JSON en fichier XLS et télécharger

Travailler Demo

Source link

Méthode

Bibliothèque d'inclusion

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

Code 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());

Vous pouvez vous référer à ce code pour l'utiliser dans ANgular 2 Component

1
Code Spy

J'ai utilisé la bibliothèque angular2-csv pour cela: https://www.npmjs.com/package/angular2-csv

Cela a très bien fonctionné pour moi à une exception près. Il y a un problème connu ( https://github.com/javiertelioz/angular2-csv/issues/10 ) avec l'insertion du caractère de nomenclature au début du fichier, ce qui entraîne l'affichage d'un caractère incohérent avec ma version. d'Excel.

0
John Langford