Json数据导出Excel(IE10支持)

2 篇文章 0 订阅
1 篇文章 0 订阅

概述

一般从后台接口拿到的是json数组,需要导出Excel,分两步:一、将json数组转化成可以导出excel的json数组,二、利用一个方法函数将json数据导出csv(csv文件即可用excel打开并可以另存为excel文件)

1.转化Json

1.1 当从后台传到前端的json格式为[{},{},{},{}],例如:[{username:123,password:123},{username:234,password:234}]

/**
 * 原始Data数据转导出的Json数据,Data结构[{},{},{},{}];
 * dataArray:原始数据数组
 * dataColumns:data中key名称数组,例如['username','password']
 * exportColumns:导出的Json中需要显示的名称数组,例如['用户名','密码']
 * formatColumns:需要的位置format函数数组
 */
static dataToExportJson(dataArray,dataColumns,exportColumns,formatColumns){
    if(dataColumns.length != exportColumns.length){
        return null;
    }
    let exportDataArg = [];
    //遍历原数组
    for(let j = 0;j<dataArray.length;j++){
        let tempObject = {};
        //遍历对象,拿到对象属性
        for(let i = 0;i<dataColumns.length;i++){
            let tempData = dataArray[j][dataColumns[i]];
            if(formatColumns){
                //判断是否需要格式转换
                if(formatColumns[i] != null && formatColumns[i] != ""){
                    tempData = formatColumns[i](tempData);
                }
            }
            tempObject[exportColumns[i]] = tempData;
        }
        exportDataArg.push(tempObject);
    }
    return exportDataArg;
}

1.2 当从后台传到前端的json格式为[,,,][,,,],例如:[100,110,120],[2015,2016,2017]

/**
 * 原始Data数据转导出的Json数据,Data结构[,,,][,,,];
 * dataArray1:原始数据数组1
 * dataArray2:原始数据数组2
 * exportColumns:导出的Json中需要显示的名称数组,长度只能为2
 * formatColumns1:对原数组1需要的位置format函数数组
 * formatColumns2: 对原数组2需要的位置format函数数组
 */
static dataAndDataToExportJson(dataArray1,dataArray2,exportColumns,formatColumn1,formatColumn2){
        if(dataArray1.length != dataArray2.length){
            return null;
        }
        let exportDataArg = [];
        //遍历原数组
        for(let i = 0;i<dataArray1.length;i++){
            let tempObject = {};
            let tempData1 = dataArray1[i];
            let tempData2 = dataArray2[i];
            if(formatColumn1){
                //判断是否需要格式转换
                tempData1 = formatColumn1(tempData1);
            }
            if(formatColumn2){
                //判断是否需要格式转换
                tempData2 = formatColumn2(tempData2);
            }
            tempObject[exportColumns[0]] = tempData1;
            tempObject[exportColumns[1]] = tempData2;
            exportDataArg.push(tempObject);
        }
        return exportDataArg;
    }

1.3 原始Data数据转导出的Json数据,Data结构[[,,,][,,,][,,,]…],且数组中每个数组的长度相同,例如:[[100,110,120],[“a”,”b”,”c”],[2015,2016,2017]]

/**
 * 原始Data数据转导出的Json数据,Data结构[[,,,][,,,][,,,]],且数组中每个数组的长度相同;
 * dataArray:原始二维数据数组,
 * exportColumns:导出的Json中需要显示的名称数组,长度跟二维数组的长度相同
 * formatColumns:对原二维数组中每一个数组需要的位置format函数数组,长度跟二维数组的长度相同
 */
static anyDataToExportJson(dataArray,exportColumns,formatColumns){
        if(dataArray.length != exportColumns.length){
            return null;
        }
        let exportDataArg = [];
        //没个数组长度相同,直接取第一个数组长度
        for(let i = 0;i < dataArray[0].length;i++) {
            let tempObject = {};
            for (let j = 0; j < dataArray.length; j++) {
                let tempData = dataArray[j][i];
                let exportColumnName = exportColumns[j];
                //判断是否需要格式转换
                if(formatColumns[j]){
                    tempData = formatColumns[j](tempData);
                }
                tempObject[exportColumnName] = tempData;
            }
            exportDataArg.push(tempObject);
        }
        return exportDataArg;
    }

2.导出Excel(IE10支持)

    /**
     * 导出csv数据
     * @param JSONData
     * @param ReportTitle
     * @param ShowLabel
     * @constructor
     */
    static JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {
        var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
        var fileName = "";
        fileName += ReportTitle.replace(/ /g,"_") + "报表数据";
        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
        var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
        var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
        var CSV = 'data:text/csv;charset=utf-8,\ufeff';
        if(isIE){
            CSV = '\ufeff';
        }
        CSV += ReportTitle + '\r\n\n';
        if (ShowLabel) {
            var row = "";
            for (var index in arrData[0]) {
                row += index + ',';
            }
            row = row.slice(0, -1);
            CSV += row + '\r\n';
        }
        for (var i = 0; i < arrData.length; i++) {
            var row = "";
            for (var index in arrData[i]) {
                row += '"' + arrData[i][index] + '",';
            }
            row.slice(0, row.length - 1);
            CSV += row + '\r\n';
        }
        if (CSV == '') {
            alert("Invalid data");
            return;
        }
        //IE只能使用Blob文件下载,不支持URI,详见:
        //https://technet.microsoft.com/ZH-CN/Library/hh779016.aspx
        if(isIE){
            var blob = new Blob([decodeURIComponent(encodeURI(CSV))], {
                type: "text/csv;charset=utf-8;"
            });
            window.navigator.msSaveBlob(blob, fileName + ".csv")
        }
        else{
            var link = document.createElement("a");
            link.href = encodeURI(CSV);
            link.style = "visibility:hidden";
            link.download = fileName + ".csv";
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    }
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值