70行代码实现vue+sheetJs导出excel功能

后台导出数据为excel格式的需求已经屡见不鲜了，今天这篇文章是封装一个vue+sheetJs的导出excel功能。

话不多说，看代码。

首先，先安装xlsx依赖，github地址 sheetJs
npm install xlsx

然后这是我封装好的代码

在文件中使用：
表格数据大致是 element-ui 中的任意表格例子
格式为

    tableData: [{id: '', name: ''}, {id: '', name: ''}]

首先引用我封装好的文件
import exportAsExcel from "./xlsx"
次注册
components: { exportAsExcel }
钩子中处理我需要的数据

// 此处没有封装进去的原因是表格的需求多变，若只是满足一时的需求，那还谈何 封装 ？不过是安慰自己实现一时需求的安慰罢了。
computed: {
    // 处理数据
    exportData() {
      let baseName = [["id", "姓名", "时间", "地址"]];
      let baseKey = ['id', 'name', 'date', 'address'];
      /**
        * tableData 表格数据，
        * 如时间需要特别处理时，比如转时分秒之类的
        * 可在mounted/created获取数据时 对其进行加工。
        * 最后返回一个新数组。
       */
      if (this.tableData.length !== 0) {
        [...this.tableData].splice(0).forEach(o => {
          let oneData = [];
          baseKey.forEach((item, index, arr) => {
            oneData.push(o[item]);
          });
          baseName.push(oneData);
        });
      }
      return baseName;
    }
  },

得到结果

下载后的文件名，可用title属性替换

最终的表格数据

如果哪里写的不好，请各位慷慨指出，若有帮助，请点个赞，不胜感激。

共勉。