前端导出表格为CSV文件功能

项目需要在一个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

注意

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

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

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

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

留言

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