wake-up-neo.net

So exportieren Sie JSON nach CSV oder Excel - Angular 2

Sagen Sie, mein Json ist so: 

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

Wie kann ich diese JSON in eine CSV- oder Excel-Datei in Angular2 exportieren?

Der Browser, den ich verwende, ist Chrome. 

Möglicherweise ist Angular2 nicht relevant. Gibt es Drittanbieter-Plugins, die in Angular2 injiziert werden können und diese Aufgabe ausführen? 

18
Vicheanak

Die Tatsache, dass Sie Angular verwenden, ist nicht so wichtig, obwohl es sich für einige weitere Bibliotheken öffnet.

Sie haben grundsätzlich zwei Möglichkeiten.

  1. Schreiben Sie Ihren eigenen json2csv-Konverter, der gar nicht so schwer ist. Sie haben bereits die JSON, die Sie in JS-Objekte umwandeln können, dann jedes Objekt einfach durchlaufen und das richtige Feld für die aktuelle Spalte erhalten.
  2. Sie können eine lib wie https://github.com/zemirco/json2csv verwenden, die dies für Sie tut.

Diese SO - Frage beantwortet wahrscheinlich auch Ihre Frage Wie konvertiert man JSON in das CSV-Format und speichert es in einer Variablen

CSV ist das Basisformat für Excel-ähnliche Programme. Leg dich nicht mit xls (x) herum, es sei denn, du musst es wirklich tun. Es wird dein Gehirn verletzen.

11
Chewtoy

Ich habe den Excel-Export mit diesen beiden Bibliotheken implementiert: file-server und xlsx .

Sie können es zu Ihrem bestehenden Projekt hinzufügen mit:

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

ExcelService-Beispiel:

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

}

Ein Arbeitsbeispiel finden Sie auf meinem Github: https://github.com/luwojtaszek/ngx-Excel-export

[Gestalten der Zellen]

Wenn Sie die Zellen formatieren möchten (z. B. Textumbruch hinzufügen, Zellinhalt zentrieren usw.), können Sie dies mit Bibliotheken im xlsx- und xlsx-Stil tun.

1) Fügen Sie die erforderlichen Abhängigkeiten hinzu

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

2) Ersetzen Sie die Datei cpexcel.js im Verzeichnis xlsx-dist.

Wegen dieses Fehlers: https://github.com/protobi/js-xlsx/issues/78 muss xlsx-style/dist/cpexcel.js durch xlsx/dist/cpexcel.js im Verzeichnis knotenmodule ersetzt werden.

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

}

Arbeitsbeispiel: https://github.com/luwojtaszek/ngx-Excel-export/tree/xlsx-style

[UPDATE - 23.08.2018]

Dies funktioniert gut mit dem neuesten Angular 6.

yarn install xlsx --save

ExcelService-Beispiel:

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

Ich habe mein Repo aktualisiert: https://github.com/luwojtaszek/ngx-Excel-export

35
luwojtaszek

Sie können XLSX library für Angular2 + verwenden.

Folgen Sie der Anleitung dort :

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
  }

Getestet mit Angular 5.2.0 und XLSX 0.13.1

7
debugger

Dies ist die richtige Art und Weise, denke ich, hat für mich gearbeitet!

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

Sie können Ihr JSON-Format in das CSV-Format exportieren, indem Sie primeng auf der Basis von angle2 verwenden.

informationen zum Konvertieren von JSON in das CSV-Format finden Sie hier

Aktualisierter Linkhttps://www.primefaces.org/primeng/#/datatable/export

1
Pardeep Jain

Verwenden Sie die Bibliothek XLSX, um JSON in eine XLS-Datei zu konvertieren und Download.

Arbeiten Demo

Quelle link

Methode

Include-Bibliothek

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

JavaScript-Code

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

Sie können diesen Code zur Verwendung in ANgular 2 Component verwenden

1
Code Spy

Ich habe dazu die angle2-csv-Bibliothek verwendet: https://www.npmjs.com/package/angular2-csv

Das funktionierte für mich mit einer Ausnahme sehr gut. Es gibt ein bekanntes Problem ( https://github.com/javiertelioz/angular2-csv/issues/10 ), bei dem das Stücklistenzeichen am Anfang der Datei eingefügt wird, wodurch bei meiner Version ein Abfallzeichen angezeigt wird von Excel.

0
John Langford