说我的json是这样的：
var readyToExport = [
{id: 1, name: 'a'},
{id: 2, name: 'b'},
{id: 3, name: 'c'}
];
如何在 Angular2 中将此 JSON 导出为 CSV 或 Excel 文件？
我使用的浏览器是 Chrome。
也许 Angular2 不相关，但是，是否有任何第三方插件可以注入 Angular2 并执行此任务？
如何将 JSON 导出为 CSV 或 Excel - Angular 2
IT技术
javascript
angular
export-to-excel
export-to-csv
2021-03-11 22:27:53
6个回答
我使用这两个库实现了 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) 替换 xlsx 样式的 dist 目录中的 cpexcel.js 文件。
由于这种错误的：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
您可以将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
}
使用 Angular 5.2.0 和 XLSX 0.13.1 进行测试
您使用 Angular 的事实并不是那么重要，尽管它确实为更多的库打开了大门。
你基本上有两个选择。
- 编写您自己的 json2csv 转换器，这并不难。您已经有了 JSON，您可以将其转换为 JS 对象，然后只需遍历每个对象并获取当前列的正确字段。
- 你可以使用像https://github.com/zemirco/json2csv这样的库来帮你完成。
此外，这个 SO 问题可能会回答您的问题How to convert JSON to CSV format and store in a variable
CSV 是类似 Excel 的程序的基本格式。除非真的有必要，否则不要弄乱 xls(x)。它会让你的大脑受伤。
这是我认为的正确方式...为我工作！接受了一个 json 数组
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");
}
您可以使用这个简单的代码从 JSON 导出到 CSV。此代码解决了许多基本问题，例如分隔符问题、自定义标题、跳过空列和添加 - 代替特定列的空数据。请参阅此 github 链接以解决有关 Angular 中 CSV 导出的所有问题。
https://github.com/marvin-aroza/Angular-csv-export
将此视为您的 JSON 数据
jsonData : any = [{
name : 'Berlin',
age : '45',
country : 'Spain',
phone : '896514326'
},
{
name : 'Professor',
age : '42',
country : 'spain'
},
{
name : 'Tokyo',
age : '35',
phone : '854668244'
},
{
name : 'Helsinki',
phone : '35863297'
}];
您可以使用这些功能下载 csv
exportCsv() {
this.downloadFile(this.jsonData);
}
downloadFile(data, filename = 'data') {
let arrHeader = ["name", "age", "country", "phone"];
let csvData = this.ConvertToCSV(data, arrHeader);
console.log(csvData)
let blob = new Blob(['\ufeff' + csvData], { type: 'text/csv;charset=utf-8;' });
let dwldLink = document.createElement("a");
let url = URL.createObjectURL(blob);
let isSafariBrowser = navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1;
if (isSafariBrowser) { //if Safari open in new window to save file with random filename.
dwldLink.setAttribute("target", "_blank");
}
dwldLink.setAttribute("href", url);
dwldLink.setAttribute("download", "sample.csv");
dwldLink.style.visibility = "hidden";
document.body.appendChild(dwldLink);
dwldLink.click();
document.body.removeChild(dwldLink);
}
并且要编辑 CSV 的格式，您可以添加此功能
ConvertToCSV(objArray, headerList) {
console.log(objArray);
console.log(headerList);
let array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
let str = '';
let row = 'S.No,';
let newHeaders = ["Name", "Age", "Country", "Phone"];
for (let index in newHeaders) {
row += newHeaders[index] + ',';
}
row = row.slice(0, -1);
str += row + '\r\n';
for (let i = 0; i < array.length; i++) {
let line = (i + 1) + '';
for (let index in headerList) {
let head = headerList[index];
line += ',' + this.strRep(array[i][head]);
}
str += line + '\r\n';
}
return str;
}
对于带逗号的值，您可以使用此功能删除逗号并将其视为一个值
strRep(data) {
if(typeof data == "string") {
let newData = data.replace(/,/g, " ");
return newData;
}
else if(typeof data == "undefined") {
return "-";
}
else if(typeof data == "number") {
return data.toString();
}
else {
return data;
}
}