web-dev-qa-db-ja.com

JSONをCSVまたはExcelにエクスポートする方法-Angular 2

私のjsonは次のようになっているとしましょう：

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

このJSONをAngular2のCSVまたはExcelファイルにエクスポートするにはどうすればよいですか？

私が使用しているブラウザはChromeです。

Angular2は関係ないかもしれませんが、Angular2に挿入してこのタスクを実行できるサードパーティのプラグインはありますか？

javascriptangularexport-to-excelexport-to-csv
22
Vicheanak

Angularを使用しているという事実はそれほど重要ではありませんが、さらに多くのライブラリで利用できるようになります。

基本的に2つのオプションがあります。

  1. 独自のjson2csvコンバーターを作成します。これはそれほど難しくありません。すでにJSONがあり、これをJSオブジェクトに変換してから、すべてのオブジェクトを反復処理して、現在の列の正しいフィールドを取得できます。
  2. https://github.com/zemirco/json2csv のようなlibを使用できます。

また、このSO質問はおそらくあなたの質問に答えます JSONをCSV形式に変換して変数に保存する方法

CSVは、Excelに似たプログラムの基本的な形式です。本当に必要な場合を除き、xls（x）をいじらないでください。それはあなたの脳を傷つけます。

12
Chewtoy

次の2つのライブラリを使用して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

[UPDATE-23.08.2018]

これは最新の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

42
luwojtaszek

Angular2 +には XLSX ライブラリを使用できます。

提供されたガイドに従って あり ：

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でテスト済み

10
debugger

これは私が考える正しい方法です...私のために働いた！ 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");
}
3
Subham Debnath

XLSXライブラリを使用してJSONをXLSファイルに変換し、ダウンロードします

作業中 デモ

ソース 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": "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());

このコードを参照して、ANgular 2コンポーネントで使用できます。

2
Code Spy

Angular2に基づくprimengを使用して、JSONをCSV形式にエクスポートできます。CSV形式とは別に、JSONに適用するにはオプトインアバターラベルが多すぎます。

jSONをCSV形式に変換するには、こちらをご覧ください

更新されたリンクhttps://www.primefaces.org/primeng/#/datatable/export

1
Pardeep Jain

このためにangle2-csvライブラリを使用しました： https://www.npmjs.com/package/angular2-csv

これは、1つの例外を除いて、私にとって非常にうまくいきました。既知の問題（ https://github.com/javiertelioz/angular2-csv/issues/1 ）があり、BOM文字がファイルの先頭に挿入され、ガベージ文字が表示される私のバージョンのExcelで。

0
John Langford