js从服务器获取csv文件,前端js直接导出生成csv文件

作者：陶路

场景：

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

作者：陶路