Как экспортировать 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.
У вас в основном есть два варианта.
- Напишите свой собственный конвертер json2csv, который не так уж и трудный. У вас уже есть JSON, с помощью которого вы можете обращаться к объектам JS, а затем просто перебирать каждый объект и получать правильное поле для текущего столбца.
- Вы можете использовать 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
