Как экспортировать JSON в CSV или Excel - Angular 2

Скажите, что мой json выглядит так:

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

Как я могу экспортировать этот JSON в файл CSV или Excel в Angular2?

Браузер, который я использую, - это Chrome.

Может быть, Angular2 не имеет значения, однако есть ли какой-либо сторонний плагин, который можно ввести в Angular2 и выполнить эту задачу?

Ответ 1

Тот факт, что вы используете Angular, не так уж и важен, хотя он открывает еще несколько lib.

У вас в основном есть два варианта.

  1. Напишите свой собственный конвертер json2csv, который не так уж и трудный. У вас уже есть JSON, с помощью которого вы можете обращаться к объектам JS, а затем просто перебирать каждый объект и получать правильное поле для текущего столбца.
  2. Вы можете использовать lib как https://github.com/zemirco/json2csv, который сделает это за вас.

Кроме того, этот вопрос SO, вероятно, отвечает на ваш вопрос. Как конвертировать JSON в формат CSV и хранить в переменной

CSV - это основной формат для программ, подобных Excel. Не отправляйтесь в xls (x), если вам действительно не нужно. Это заставит ваш мозг болеть.

Ответ 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) Замените файл cpexcel.js в каталоге dist xlsx style.

Из-за этой ошибки: https://github.com/protobi/js-xlsx/issues/78 потребовалось заменить xlsx-style/dist/cpexcel.js на xlsx/dist/cpexcel.js в каталоге node_modules.

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

[ОБНОВЛЕНИЕ - 23.08.2018]

Это отлично работает с новейшим угловым 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

Ответ 3

Вы можете использовать библиотеку XLSX для Angular2+.

После руководства при условии там:

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
  }

Протестировано с угловым 5.2.0 и XLSX 0.13.1

Ответ 4

Вы можете экспортировать JSON в формат CSV, используя primeng на основе углового2, кроме CSV-формата слишком много опциональных возможностей для применения на JSON,

для преобразования вашего JSON в формат CSV см. здесь

Обновлена ссылка https://www.primefaces.org/primeng/#/datatable/export

Ответ 5

Я использовал библиотеку angular2-csv для этого: https://www.npmjs.com/package/angular2-csv

Это сработало очень хорошо для меня за одним исключением. Существует известная проблема (https://github.com/javiertelioz/angular2-csv/issues/10), когда символ BOM вставлен в начале файла, что приводит к отображению символа мусора с моей версией Excel.

Ответ 6

Используйте библиотеку XLSX для преобразования JSON в файл XLS и Загрузите

Рабочая демонстрация

Ссылка источника

метод

Включить библиотеку

<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