js導出csv文件

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,'文件名');
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章