js导出csv文件

最新推荐文章于 2024-06-14 11:26:17 发布

淡定如斯

最新推荐文章于 2024-06-14 11:26:17 发布

阅读量835

点赞数

分类专栏： javascript 文章标签： js 导出cvs 前端

本文链接：https://blog.youkuaiyun.com/l344938248/article/details/89389180

版权

javascript 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何利用json2csv库在前端JavaScript环境中将数据转换并导出为CSV文件，首先需要安装该依赖，然后调用特定方法实现数据转换和下载操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js导出csv文件

用到了json2csv依赖包，首先安装依赖

npm install json2csv --save

const { Parser } =  require('json2csv');


/**
  * @param {String} fields[表头]
  * @param {String} data[导出的json数据]
  * @param {String} fileName[导出的文件名]
  */
exportCSV(fields,data,fileName){
  const csv = createCVSData(fields,data);
    if(isIE()){
        // IE10以及Edge浏览器
        const BOM = "\uFEFF";
        // 文件转Blob格式
        let csvData = new Blob([BOM + csv], { type: "text/csv" });
        navigator.msSaveBlob(csvData, `${fileName}.csv`);
    }else {
        let downloadLink = document.createElement("a");
        downloadLink.href = getDownloadUrl(cvs);
        downloadLink.download = `${fileName}.csv`; 
        document.body.appendChild(downloadLink);
        downloadLink.click();
        document.body.removeChild(downloadLink); 
    }
    return csv;
},

const createCSVData  = function(fields,data){
    const json2csvParser  = new Parser({fields}) ;
    const csv = json2csvParser.parse(data)
    return csv;
}
const getDownloadUrl = function(csvData){
    var _utf = "\uFEFF"; // 为了使Excel以utf-8的编码模式，同时也是解决中文乱码的问题
    if (window.Blob && window.URL && window.URL.createObjectURL) {
        var csvData = new Blob([_utf + csvData], {
            type: 'text/csv'
        });
        return URL.createObjectURL(csvData);
    }
}
const isIE = function() {
    let isIE = false;
    if (navigator.userAgent.indexOf("compatible") > -1 &&navigator.userAgent.indexOf("MSIE") > -1) {
        // ie浏览器
        isIE = true;
    }
    if (navigator.userAgent.indexOf("Trident") > -1) {
        // edge 浏览器
        isIE = true;
    }
    return isIE;
}

调用：


//fields 要与json的key名相对应
const fields = ['id','date','channal','addDeviced'];
exportCSV(fields,jsonData,'文件名');