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

版权声明：本文为博主原创文章，未经博主允许不得转载。 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);
}