项目需要在一个Excel表里面导出一个主表和子表，export2Excel插件不适合本项目使用，故自己写了个功能，记录方便参考，代码有待优化！！！

项目框架：Vue.js

代码如下

getExportList() {
  let jsonData = {
      trade:{
        tHeader: ["名字","性别","年龄","爱好","身份证号码"],
        filterVal: ["name","sex","nlin","aihao","sfz"],
        list: [{name: "名字啊",sex: "性别啊",aihao: "爱好啊",nlin:"年龄啊",sfz:"123456789012345678"},
              {name: "名字哦",sex: "性别哦",nlin:"年龄哦",aihao: "爱好哦",sfz:"123456789012345678"},
              {name: "名字哦",sex: "性别哦",nlin:"年龄哦",aihao: "爱好哦",sfz:"123456789012345678"},
              {name: "名字哦",sex: "性别哦",nlin:"年龄哦",aihao: "爱好哦",sfz:"123456789012345678"},
              {name: "名字哦",sex: "性别哦",nlin:"年龄哦",aihao: "爱好哦",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()
},

注意

1. getExportList（）用于点击获取数据，用按钮触发该事件。

2. exportPathMethod（）用于处理数据并导出为CSV文件，配合后端获取对应的json数据格式即可导出。

3. trade为主表，order为副表，tHeader为表头，filterVal为过滤器，list为数据

4. 内容会根据filterVal过滤器来获取和排列，所以表头需要和过滤器对应，否则数据对应不上表头

留言

本文为个人项目开发过程的问题记录，代码有待优化，有小bug，后续优化在做文章更新，使用时请谨慎，使用本代码出现任何问题本人概不负责。