前端导出功能实现--csv文件格式

记录一下前端导出文件的功能,目前该功能仅支持导出csv文件格式,如下是function:

function exportCvs(com,model,param){
            var title = storageObj.title;
            var titleForKey = storageObj.titleForKey;
            var data = storageObj.data;
            var str = [];
            str.push(storageObj.title.join(",")+"\n");
            for(var i=0;i<data.length;i++){
                var temp = [];
                for(var j=0;j<titleForKey.length;j++){
                    temp.push(data[i][titleForKey[j]]);
                }
                str.push(temp.join(",")+"\n");
            }
            var uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str.join(""));
            var downloadLink = document.createElement("a");
            downloadLink.href = uri;
            downloadLink.download = new Date().toISOString().substring(0,10)+"-labelDetail.csv";
            document.body.appendChild(downloadLink);
            downloadLink.click();
            document.body.removeChild(downloadLink);
};

参数com、model、param没有使用,可以不传递数据。
storageObj为一个Object对象,格式如下所示:
var storageObj = {
title:[“时间”,”label名称”, “点击次数”],
titleForKey:[“labelTime”, “labelName”, “labelCount”],
data:[]
};
titile是第一行的说明行,titleForKey的数组数量与title一致。
data是一个对象数组,基本的格式为:

[{
    "labelTime":"value1",
    "lableName":"value2",
    "labelCount":"value3"
},{
    "labelTime":"value4",
    "lableName":"value5",
    "labelCount":"value6"
},{
    "labelTime":"value7",
    "lableName":"value8",
    "labelCount":"value9"
}] 

数据的添加可以采用storageObj.data数组对象动态添加。
最后导出的csv文件的格式如下图所示:
export csv file

posted @ 2018-06-20 10:28  yarcl  阅读(859)  评论(0编辑  收藏  举报