前端导出表格为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,后续优化在做文章更新,使用时请谨慎,使用本代码出现任何问题本人概不负责。

你可能感兴趣的:(前端导出表格为CSV文件功能)