如何将 JSON 导出为 CSV 或 Excel - Angular 2
Posted
技术标签:
【中文标题】如何将 JSON 导出为 CSV 或 Excel - Angular 2【英文标题】：How to Export JSON to CSV or Excel - Angular 2 【发布时间】：2017-01-03 18:27:21 【问题描述】：说我的json是这样的：
var readyToExport = [
id: 1, name: 'a',
id: 2, name: 'b',
id: 3, name: 'c'
];
如何在 Angular2 中将此 JSON 导出为 CSV 或 Excel 文件？
我使用的浏览器是 Chrome。
也许 Angular2 不相关，但是，是否有任何第三方插件可以注入 Angular2 并执行此任务？
【问题讨论】：
有几种方法可以导出为 CSV 或 Excel；您使用 Angular 的事实可能无关紧要。更重要的是您使用的是什么浏览器，因为客户端创建的文件在浏览器之间不是很统一。 我用的是 Chrome 浏览器，你有什么第三方插件可以用来做这样的任务吗？ 您可以使用插件 ngCsv - 使用 AngularJS 导出为 CSV。链接在这里：ngmodules.org/modules/ng-csv @TaiNguyen ng-csv 需要 ngSanitize，它在 angular2 中不可用。 @Vicheanak 您可以使用 nodejs 将 json 转换为 csv。然后 angularjs2 调用 http post josn 并获取文件 scv。我想是的 【参考方案1】：我使用这两个库实现了 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 需要在 node_modules 目录中将 xlsx-style/dist/cpexcel.js 替换为 xlsx/dist/cpexcel.js。
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
[更新 - 2018 年 8 月 23 日]
这适用于最新的 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 和 xlsx 样式的库来执行此操作。我用说明更新了我的帖子。您还可以在我的 GitHub 上找到工作示例。 @luwojtaszek，我尝试使用上述方法创建一个 excel，它正在创建一个 excel 文件，但我无法打开它说文件已损坏。 修改行为 const excelBuffer: any = XLSX.write(workbook, bookType: 'xlsx', type: 'array' );【参考方案2】：您可以将XLSX 库用于 Angular2+。
按照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
使用 Angular 5.2.0 和 XLSX 0.13.1 测试
【讨论】：
谢谢你救了我的命。 如何设置单元格样式？ @MohammadZeshan，官方包描述中基本上有关于格式化的参考。我建议创建一个新问题，因为这超出了主题范围。【参考方案3】：您使用 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)。它会让你的大脑受伤。
【讨论】：
您可以使用为您生成 XLS 的后端导出到 XLS。例如。对于 php，有 PHPExcel（不会像直接从浏览器中那样伤害你的大脑）【参考方案4】：这是我认为的正确方式...为我工作！ 取了一个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");
【讨论】：
【参考方案5】：您可以使用这个简单的代码从 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;
【讨论】：
【参考方案6】：使用 XLSX 库将 JSON 转换为 XLS 文件并下载
工作Demo
来源link
方法
包含库
<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": "***e"
,
"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 组件中使用
【讨论】：
@RajRajeshwarSinghRathore 检查它对我来说工作正常，请再试一次并单击“下载 XLS 文件”按钮 是的，它现在正在工作。可能当时有些问题。谢谢 如果你已经有了正确格式的 json，只需使用 json_to_sheet 而不是 aoa_to_sheet【参考方案7】：我为此使用了 angular2-csv 库：https://www.npmjs.com/package/angular2-csv
这对我来说非常有效，但有一个例外。存在一个已知问题 (https://github.com/javiertelioz/angular2-csv/issues/10)，在文件开头插入 BOM 字符会导致在我的 Excel 版本中显示垃圾字符。
【讨论】：
【参考方案8】：您可以使用基于 angular2 的 primeng 将 JSON 导出为 CSV 格式，除了 CSV 格式之外，还有太多可用于 JSON 的选项，
要将您的 JSON 转换为 CSV 格式，请参见此处
http://www.primefaces.org/primeng/#/datatableexport更新链接 https://www.primefaces.org/primeng/#/datatable/export
【讨论】：
Primeng DataTable Export 不导出模板列，这是我正在寻找另一种解决方案的原因。也不能对模板列进行排序。以上是关于如何将 JSON 导出为 CSV 或 Excel - Angular 2的主要内容，如果未能解决你的问题，请参考以下文章
如何在 vuetify 数据表上添加导出 csv、excel 按钮？
如何使用Python asammdf将MDF导出到Excel或CSV
jQuery插件，用于将html表导出为JSON、XML、CSV、TSV、TXT、SQL、Word、Excel、PNG和PDF