作者：陶路

场景：

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

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

标签代码：

导出csv

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文件。

作者：陶路