javascript中js实现导出CSV文件功能

最新推荐文章于 2025-07-10 11:40:36 发布

原创最新推荐文章于 2025-07-10 11:40:36 发布 · 2.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言 #ecmascript

本文介绍了一种使用JavaScript将数组数据导出为CSV文件的方法。该方法首先将数组中的键名作为CSV的第一行，随后遍历数组中的每一项，将其转换为带有制表符分隔的CSV格式字符串。最后通过创建a标签的方式触发文件下载。

js直接在页面中将数组导出到CSV文件之中

//数组导出CSV文件
function exportCSV(jsonData,fileName){
    if(!jsonData || jsonData.length==0){
        return;
    }
    if(!fileName){
        fileName="exportCSV.csv";
    }
    let one=jsonData[0];
    let csvText="";
    for(let key in one){
        csvText+=key+","
    }
    csvText=trim(csvText,",")+"\n";
    //增加\t为了不让表格显示科学计数法或者其他格式
    for(let i = 0 ; i < jsonData.length ; i++ ){
        let row="";
        for(let item in jsonData[i]){
            row+=`${jsonData[i][item] + '\t'},`;
        }
        csvText+=trim(row,",")+'\n';
    }
    //encodeURIComponent解决中文乱码
    let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(csvText);
    //通过创建a标签实现
    let link = document.createElement("a");
    link.href = uri;
    //对下载的文件命名
    link.download =  fileName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}
//js实现类似php trim函数
function trim(str, char) {
    if (char) {
        str=str.replace(new RegExp('^\\'+char+'+|\\'+char+'+$', 'g'), '');
    }
    return str.replace(/^\s+|\s+$/g, '');
};