前端js直接导出生成csv文件

本文链接： http://www.zxlucky.com/wordpress/archives/296

作者：陶路

场景：

有些场景下，前端需要筛选数据内容 编辑数据内容 之后生成表格文件 或者不想泄露给服务端数据资料，该方法无需通过服务端 可以直接在浏览器生成csv文件

csv文件格式定义方法：csv文件可以用excel打开 ，每行间隔用 “\n” 隔开，每列间隔用“,”隔开

标签代码：

<a id="out2csv"  href="#" >导出csv</a>

js代码：

out2csv.click(function(){
    str = 'id,name,tel\n1,taolu,02423187000\n2,taodalu,02423186000'
    out2csv.attr('href', 'data:text/txt;charset=utf-8,\ufeff'+str);
    out2csv.attr('download', 'out2csv.csv');
    out2csv.click();
})

可能遇到的问题：

在mac上可能无法打开 可以用商店里的其他软件打开csv文件

另外 导出的csv文件 excel因为没有任何数据描述信息 可能存在将电话号 订单编号等长数字数据强制转换成科学计数法的 数字类型 解决这个问题 参考其他应用里 采用了在数据前 加“`”字符的方法 导出的数据会携带该字符 做excel导入的时候需要特殊处理

业务代码：

输入一个列表 导出csv文件 此处没有使用 encodeURIComponent 进行编码转换，使用download_file   方法 可以直接定义文件名 创建一个a标签 构造blob对象 进行创建文件下载 并删除资源 其中参数 o 默认填写true 在文件内容前加bom头字符

/*
参数1 data对象

 data导入的数据类型 一个数组对象
 heads头部名称
 columns要输出的字段名
 remove_targets是否需要过滤html标签
 spe_column需要处理的数字字段 会在之前加`


 例子：

{
 'data':{[id:1,name:'a',sort:10],[id:2,name:'b',sort:9],[id:3,name:'c',sort:8]},
 'heads':['id号','姓名'],
 'columns':['id','name'],
 'remove_targets':false,
 'spe_column':['id'],
}

参数2 fun获取csv内容后的回调函数

*/

var data2csv = function(data = {},fun = function(str){return str}){
 
     //验证并处理参数
     if(data.heads.length != data.columns.length){
         return {'code':false,'msg':'表头和内容字段数不符'};
     }
 
     if(!data.remove_targets){
         data.remove_targets = false;
     }else{
         data.remove_targets = true;
     }
 
     csv_data = data.data;
     heads = data.heads;
     columns = data.columns;
     spe_column = data.spe_column;
     remove_targets = data.remove_targets;
 
     // 构造csv内容
     var str = "";
     for(var j in csv_data){
         e = csv_data[j];
         for(var i in columns){
            c = e[columns[i]];
            if(remove_targets){
                c = c.replace(/<[^>]+>/g,"")+",";
            } 
            if(spe_column.length>0 && spe_column.indexOf(columns[i])>-1){
                c = '`'+c;
            }
        str += c;
        }
    str += "\n";
    }
    head_str = "";
    for(var i in heads){
        head_str += heads[i]+",";
    }
    head_str += "\n";
    str = head_str + str;
    return fun(str);
}

//生成并下载文件
function download_file(file_name, content, o = true) {
   if(o){
        content = '\ufeff'+content
   }
   var aTag = document.createElement('a');
   var blob = new Blob([content]);
   aTag.download = file_name;
   aTag.href = URL.createObjectURL(blob);
   aTag.click();
   URL.revokeObjectURL(blob);
}

使用样例

var head = [
     '交易类型',
     '订单号',
     '操作人姓名及编号',
     '原价总额',
     '优惠金额',
     '优惠比率',
     '实付金额',
     '支付方式',
     '结算时间',
     '餐桌号',
     '整单优惠',
     '状态',
     '会员信息',
     '备注信息',
];
var column = [
     'io',
     'num',
     'em_name',
     'money',
     'dismoney',
     'discount',
    'tmoney',
    'pay_cate',
    'etime',
    'table_name',
    'main_dismoney',
    'status',
    'user',
    'base',
];
var num_column = ['num'];
data2csv({
    'data':csv,
    'heads':head,
    'columns':column,
    'spe_column':num_column,
    'remove_targets':true,
},function(content){
    console.log(content);
    download_file('order_list.csv',content,true)
});

csv变量 是元数据 是一个列表每行有各自的字段，使用以上方法 就可以 将数据导出成一个对应的csv文件。

本文链接： http://www.zxlucky.com/wordpress/archives/296

作者：陶路