Jak wyeksportować do pliku CSV lub JSON Excel - kątowa 2

Question

Say my json jest tak:

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

Jak mogę wyeksportować do pliku CSV lub JSON Excel plik w Angular2?

Przeglądarką, której używam jest Chrome.

Być może Angular2 nie ma znaczenia, jednak czy istnieje wtyczka innej firmy, którą można wstrzyknąć w Angular2 i wykonać to zadanie?

Answer 1

Fakt, że używasz Angulara nie jest aż tak ważny, chociaż otwiera się na kilka bibliotek.

Masz zasadniczo dwie opcje.

1. Napisz własny konwerter json2csv, co nie jest wcale takie trudne. Masz już JSON, który możesz obrócić do obiektów JS, a następnie po prostu przetestuj każdy obiekt i uzyskaj poprawne pole dla bieżącej kolumny.
2. Możesz użyć biblioteki takiej jak https://github.com/zemirco/json2csv, która robi to za Ciebie.

Również ten SO pytanie zapewne odpowiedzi na swoje pytanie How to convert JSON to CSV format and store in a variable

CSV jest podstawowym formatem Excel podobnych programów. Nie wdawaj się w Xls (x), chyba że naprawdę musisz. To sprawi, że twój mózg będzie bolał.

Answer 2

można wyeksportować JSON do formatu CSV, używając primeng podstawie angular2, oprócz formacie CSV istnieje zbyt wiele optoin availabel zastosować na JSON,

do konwersji plików JSON w formacie CSV zobaczyć tutaj

• http://www.primefaces.org/primeng/#/datatableexport

Updated Link https://www.primefaces.org/primeng/#/datatable/export

Answer 3

użyłem biblioteki angular2-CSV dla tego: https://www.npmjs.com/package/angular2-csv

To bardzo dobrze dla mnie, z jednym wyjątkiem. Znany jest problem (https://github.com/javiertelioz/angular2-csv/issues/10) z wstawieniem znaku BOM na początku pliku, co powoduje wyświetlenie znaku śmieci w mojej wersji programu Excel.

Answer 4

Zaimplementowałem program Excel Export przy użyciu tych dwóch bibliotek: file-server i xlsx.

Można go dodać do istniejącego projektu z: przykład

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

} 

można znaleźć przykład działa na moim github: https://github.com/luwojtaszek/ngx-excel-export

[Styling komórki ]

Jeśli chcesz uporządkować komórki (np. dodaj zawijanie tekstu, wyśrodkowanie zawartości komórki itp.) możesz to zrobić, używając bibliotek w stylu xlsx i xlsx.

1) Dodaj wymagane zależności

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

2) zastąpić plik xlsx cpexcel.js w stylu katalogu gmina.

Z powodu tego błędu: https://github.com/protobi/js-xlsx/issues/78 wymagane jest zastąpienie xlsx-style/dist/cpexcel.js przez xlsx/dist/cpexcel.js w katalogu node_modules.

3) Wdrożenie 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); 
    } 

} 

przykład robocza: https://github.com/luwojtaszek/ngx-excel-export/tree/xlsx-style