版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_33624284/article/details/81110264
关于JS在图表控件应用上直接生成表格数据导出到本
最近经常用到Echarts控件,对于平常通过后台导出数据比较麻烦,这里用js直接在前端做到同样的事:
JSONData:json数据[Object,Object,Object……]
ReportTitle:文件标题
ShowLabel:头部标签:默认true
//导出表格表头中文映射
var chineseLaberMapping={key:"value"};
function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {
//如果JSONData不是对象,那么JSON.parse将解析对象中的JSON字符串
var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
var CSV = '';
//此条件将生成标签/标题
if (ShowLabel) {
var row = "";
//这个循环将从on数组的第一个索引中提取标签
for (var index in arrData[0]) {
console.log(index);
//现在将每个值转换为字符串和逗号分隔
var th=index.toString().replace(/_/,'');
if(row.indexOf(th)>=0){
}else{
row += index + ',';
}
}
row = row.slice(0, -1);
var englishLabels=row.split(",");
for (var i = 0; i < englishLabels.length; i++) {
if(chineseLaberMapping[englishLabels[i]]){
console.log(englishLabels[i]);
console.log(englishLabels[i]+"--"+chineseLaberMapping[englishLabels[i]]);
englishLabels[i]=chineseLaberMapping[englishLabels[i]];
}
}
row = englishLabels.join(",");
//添加带换行符的标签行
CSV += row + '\r\n';
}
//第一个循环是提取每一行。
for (var i = 0; i < arrData.length; i++) {
var row = "";
//内循环将提取每个列并将其转换为字符串逗号分隔
for (var index in arrData[i]) {
if(index.toString().indexOf("_")>=0){
break;
}
row += '"' + arrData[i][index] + '",';
}
row.slice(0, row.length - 1);
//在每一行之后添加换行符
CSV += row + '\r\n';
}
if (CSV == '') {
alert("Invalid data");
return;
}
//生成一个文件名称
var fileName = "";
//这将从标题中删除空格,并用下划线替换
fileName += ReportTitle.replace(/ /g, "_");
//初始化文件格式,您需要csv或xls。
var uri = 'data:text/csv;charset=utf-8,\uFEFF' + encodeURI(CSV);
//现在是棘手的部分。
//你可以使用>> window.open(uri);
//但这在某些浏览器中是行不通的
//否则你将得不到正确的文件扩展名
//这个技巧将生成一个temp <a />标记
var link = document.createElement("a");
link.href = uri;
//这个技巧将生成一个temp <a />标记//设置隐藏的可见性,因此不会影响web布局
link.style = "visibility:hidden";
link.download = fileName + ".csv";
//此部分将在自动点击后添加锚标签并删除
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}