參考部落格

前端匯出表格為CSV檔案功能

程式碼

getExportList() {
  let jsonData = {
      trade:{
        tHeader: ["名字","性別","年齡","愛好","身份證號碼"],
        filterVal: ["name","sex","nlin","aihao","sfz"],
        list: [{name: "名字啊",sex: "性別啊",aihao: "愛好啊",nlin:"年齡啊",sfz:"123456789012345678"},
              {name: "名字哦",sex: "性別哦",nlin:"年齡哦",aihao: "愛好哦",sfz:"123456789012345678"}]
      },
      order:{
        tHeader: ["附表名字","附表性別","附表年齡","附表愛好"],
        filterVal: ["name","sex","nlin","aihao"],
        list: [{name: "附表名字啊",sex: "附表性別啊",nlin:"附表年齡啊",aihao: "附表愛好啊",},
               {name: "附表名字哦",sex: "附表性別哦",nlin:"附表年齡哦",aihao: "附表愛好哦",}]
        }
    }    
    this.exportPathMethod(jsonData)// 呼叫exportPathMethod對資料進行處理匯出
 },

exportPathMethod(data) {
    /*
    *注：csv檔案：","逗號換列，\n換行，\t防止excel將長數字變科學計演算法等樣式
    */

    //要匯出的json資料
    let mainLists = data.trade   //主表
    let subLists = data.order    //副表
    
    //## 資料處理
    //一級表
    let mainTitle = mainLists.tHeader;//一級標題
    let mainTitleForKey = mainLists.filterVal;//一級過濾
    let mainList = mainLists.list;//一級資料
    let mainStr = [];
    mainStr.push(mainTitle.join("\t,")+"\n");   //標題新增上換列轉成字串並存進陣列
    for(let i=0;i<mainList.length;i++){
        let temp = [];
        for(let j=0;j<mainTitleForKey.length;j++){
            temp.push(mainList[i][mainTitleForKey[j]]); //根據過濾器拿出對應的值
        }
        mainStr.push(temp.join("\t,")+"\n");    //取出來的值加上逗號換列轉字串存陣列
    }
    // console.log(JSON.stringify(mainStr.join("")));//列印文字

    //二級表
    let subTitle = subLists.tHeader;//二級標題
    let subTitleForKey = subLists.filterVal;//二級過濾
    let subData = subLists.list;//二級資料
    let subStr = [];
    subStr.push(subTitle.join("\t,")+"\t\n");
    for(let i=0;i<subData.length;i++){
        let temp = [];
        for(let j=0;j<subTitleForKey.length;j++){
            temp.push(subData[i][subTitleForKey[j]]);
        }
        subStr.push(temp.join("\t,")+"\t\n");
    }
    //兩個表陣列轉成字串合併
    let merged = mainStr.join("") + '\n' + subStr.join("")
    //console.log(JSON.stringify(merged));//列印結果
    
    //## 匯出操作
    // encodeURIComponent解決中文亂碼
    const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(merged)
    // 通過建立a標籤實現
    let link = document.createElement('a')
    link.href = uri
    // 對下載的檔案命名
    link.download = '客戶管理列表.csv'
    document.body.appendChild(link)
    link.click()
},