问题
Say my json is like this:
var readyToExport = [
{id: 1, name: 'a'},
{id: 2, name: 'b'},
{id: 3, name: 'c'}
];
How can I export this JSON into CSV or Excel file in Angular2?
The browser that I'm using is Chrome.
Maybe Angular2 is not relevant, however, is there any third party plugin that can be injected in Angular2 and perform this task?
回答1:
The fact that you are using Angular isn't all that important, though it does open up for some more libs.
You basically have two options.
- Write your own json2csv converter, which isn't all that hard. You already have the JSON, which you can turn to JS objects, and then just iterate over every object and get the correct field for the current column.
- You can use a lib like https://github.com/zemirco/json2csv which does it for you.
Also, this SO question probably answers your question How to convert JSON to CSV format and store in a variable
CSV is the basic format for Excel-like programs. Don't go messing with xls(x) unless you really have to. It will make your brain hurt.
回答2:
I implemented excel export using these two libraries: file-server and xlsx.
You can add it to your existing project with:
npm install file-saver --save
npm install xlsx --save
ExcelService example:
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);
}
}
You can find working example on my github: https://github.com/luwojtaszek/ngx-excel-export
[Styling the cells]
If you want to style the cells (f.e. add text wrapping, centering cell content, etc.) you can do this using xlsx and xlsx-style libraries.
1) Add required dependencies
npm install file-saver --save
npm install xlsx --save
npm install xlsx-style --save
2) Replace cpexcel.js file in xlsx-style dist directory.
Because of this bug: https://github.com/protobi/js-xlsx/issues/78 it's required to replace xlsx-style/dist/cpexcel.js with xlsx/dist/cpexcel.js in node_modules directory.
3) Implement 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);
}
}
Working example: https://github.com/luwojtaszek/ngx-excel-export/tree/xlsx-style
[UPDATE - 23.08.2018]
This works fine with the newest Angular 6.
yarn install xlsx --save
ExcelService example:
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));
}
}
I updated my repo: https://github.com/luwojtaszek/ngx-excel-export
回答3:
You can use XLSX library for Angular2+.
Following the guide provided there:
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
}
Tested with Angular 5.2.0 and XLSX 0.13.1
回答4:
This is the right way i think... worked for me! took a json array
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");
}
回答5:
Use the XLSX library to convert JSON into XLS file and Download
Working Demo
Source link
Method
Include library
<script type="text/javascript" src="//unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
JavaScript Code
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());
You can refer this code to use in ANgular 2 Component
回答6:
You can export your JSON to CSV format using primeng based on angular2, apart from CSV format there are too many optoin availabel to apply on JSON,
for converting your JSON into CSV format see here
- http://www.primefaces.org/primeng/#/datatableexport
Updated link https://www.primefaces.org/primeng/#/datatable/export
回答7:
I used the angular2-csv library for this: https://www.npmjs.com/package/angular2-csv
This worked very well for me with one exception. There is a known issue (https://github.com/javiertelioz/angular2-csv/issues/10) with the BOM character getting inserted at the start of the file which causes a garbage character to display with my version of Excel.
来源：https://stackoverflow.com/questions/39177183/how-to-export-json-to-csv-or-excel-angular-2