纯js生成并下载CSV文件

来源:https://www.sucaihuo.com/js/2541.html 2017-07-26 05:41浏览(3212) 收藏

纯JavaScript实现生成并下载CSV文件,前端竟然可以生成CSV文件,感兴趣的可以看下如何生成CSV文件,并且下载。
纯js生成并下载CSV文件
分类:其它特效 > jQuery插件 难易:初级
查看演示 下载资源: 12 下载资源 下载积分: 50 积分

js生成CSV+下载

var people = [
    {
        "name": "Arron",
        "age": "22",
        "sex": "男",
        "birthday": "1993-01-06",
        "phone": "13187890289",
        "hobby": "basketball"
    },
    {
        "name": "Jack",
        "age": "24",
        "sex": "男",
        "birthday": "1991-02-22",
        "phone": "13567454389",
        "hobby": "football"
    },
    {
        "name": "Alice",
        "age": "21",
        "sex": "女",
        "birthday": "1996-11-26",
        "phone": "13187889509",
        "hobby": "reading"
    }
];


//s1. 用一个数组来存一行数据,所以第一行用一个数组来保存字段名
var head = [['name', 'age', 'sex', 'birthday', 'phone', 'hobby']];

//s2. 将数据push到大数组中
var p = people;
for (var i = 0; i < p.length; i++) {
    head.push([p[i].name, p[i].age, p[i].sex, p[i].birthday, p[i].phone, p[i].hobby]);
}

//s3. 按照csv文件内容格式,把每个数组用 , 连接,形成一行,并存入新数组
var csvRows = [];
for (var j = 0; j < head.length; j++) {
    csvRows.push(head[j].join(','))
}

//s4. 把新数组用 \n 回车连接,形成csvString

var csvString = csvRows.join('\n');

//BOM的方式解决EXCEL乱码问题
var BOM = '\uFEFF';
csvString = BOM + csvString;

//s5. 创建a标签
var a = document.getElementById('d');
a.href = 'data:attachment/csv,' + encodeURI(csvString);
a.target = '_blank';
a.download = 'sucaihuo.csv';
标签: CSV
评论3
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

  • 头像 板凳
    11-08 16:51
    u***7
    厉害了,赞,我已经使用了。
  • 头像 椅子
    08-21 01:33
    k***o
    好好好好好好好好好好好好
  • 头像 沙发
    07-26 10:19
    小***楼
    厉害了!我收
1 2