关于JS在图表控件应用上直接生成表格数据导出到本地

关于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);
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值