Как экспортировать 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 и выполнить эту задачу?

17
angular export-to-csv export-to-excel javascript

6 ответов

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

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

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

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

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

9

я реализовал экспорт excel с помощью этих двух библиотек: и 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

[укладка ячеек]

если вы хотите, чтобы стиль ячеек (f.e. добавить текст оборачивать, центризовать содержание клетки, etc.) вы можете сделать это с помощью библиотек xlsx и xlsx-стиля.

1) добавить необходимые зависимости

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

2) заменить cpexcel.JS-файл в каталоге dist в стиле xlsx.

из-за этой ошибки: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]

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

29

можно использовать 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

5

вы можете экспортировать JSON в формат CSV с помощью primeng на основе angular2, кроме формата CSV, слишком много доступных оптоин для применения на JSON,

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

обновили ссылку https://www.primefaces.org/primeng/#/datatable/export

1

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

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

0

использовать 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 Компонент

0