JS导出CSV,使用JS序列化form的值。

把所有的值存入设置的一个空的form中,定义隐藏域name的名称,定义表头第一行的名称,定义文件名,定义每行字段的个数,因为表单序列化是序列化成key,value的数组形式,我们需要把每行作为一个数组。 

function exportData() {
        var html = "";
        for(var i=0;i<tableData.length;i++){
            html += addValue((i + 1), 'index')
                + addValue(tableData[i].busPlateNo, 'busInfo.plateNo')
                + addValue(tableData[i].busStatus, 'busInfo.status')
                + addValue(tableData[i].gpsStatus, 'gpsStatus')
                + addValue(tableData[i].ignitionStatus, 'ignitionStatus')
                + addValue(tableData[i].alarmStatus, 'warnStatus')
                + addValue(tableData[i].onlineNumber + "/" + tableData[i].totalNumber, 'onlineNumber')
                + addValue(tableData[i].historyNumber + "/" + tableData[i].totalNumber, 'hisMaxNumber')
                + addValue(tableData[i].dayMileage, 'dayMileage')
                + addValue(tableData[i].totalMileage, 'totalMileage')
                + addValue(tableData[i].reportTime, 'reportTime')
                + addValue(tableData[i].location, 'location')
        }
        $("#busRealTimeInfo").html(html);
        var dataInfo = $("#busRealTimeInfo").serializeArray();
        if (queryData.hasOwnProperty('busInfo.id') && queryData['busInfo.id'] != "" && dataInfo != '') {
            
            var titles = new Array('序号', '车牌号', '车辆状态', 'GPS状态', '点火状态', '报警状态', '实时报文', '历史最高报文', '当日里程(km)', '累计里程(km)', '上报时间', '当前位置');
            var items = new Array('index', 'busInfo.plateNo', 'busInfo.status', 'gpsStatus', 'ignitionStatus', 'warnStatus', 'onlineNumber', 'hisMaxNumber', 'dayMileage', 'totalMileage', 'reportTime', 'location');
            var fileName = "车辆实时数据_" + SingApp.DateFomate.Format(new Date(), "yyyyMMdd");
            jsonToCsv(titles, dataInfo, items, fileName, 12);
        } else {
            publicTips("请先进行查询");
        }
    }
function addValue(htm, nameValue) {
        return "<input type='hidden' name='" + nameValue + "' value='" + htm + "'>";
    }

解析序列化的值,并拼装成json字符串,解析json字符串,之后下载。 

function jsonToCsv(titles, jsonStr, items, fileName, num) {
    //列标题,逗号隔开,每一个逗号就是隔开一个单元格
    var str = "";
    for (var i = 0; i < titles.length; i++) {
        str += titles[i] + "\t,"
    }
    str += "\n";
    //增加\t为了不让表格显示科学计数法或者其他格式
    var jsonData = JSON.parse($.parseJSON(serializeToJSON(jsonStr, num)));
    for (var i = 0; i < jsonData.length; i++) {
        var json = jsonData[i];
        for (var j = 0; j < items.length; j++) {
            if (items[j] in json) {
                str += json[items[j]] + "\t,";
            }
        }
        str += "\n";
    }
    //encodeURIComponent解决中文乱码
    var uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
    //通过创建a标签实现
    var link = document.createElement("a");
    link.href = uri;
    //对下载的文件命名
    link.download = fileName + ".csv";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

拼装json字符串。 

/**
 *
 * @param obj serializeArray()序列化数据
 * @param num 每行name的个数
 * @example serializeToJSON($("#busRealTimeInfo").serializeArray(), 9)
 * @returns {string}
 */
function serializeToJSON(obj, num) {
    var jsonStr = "[{";
    $(obj).each(function (index, item) {
        jsonStr += "\"" + item.name + "\":\"" + item.value + "\"";
        if (index != obj.length - 1) {
            if (index % num == (num - 1)) {
                jsonStr += "},{";
            } else {
                jsonStr += ",";
            }
        } else {
            jsonStr += "}]";
        }
    });
    return JSON.stringify(jsonStr);
}

猜你喜欢

转载自blog.csdn.net/xionglangs/article/details/81109197
今日推荐