导出数据为Excel表格

整理一下之前做的功能，导出Excel。

参考文章：

        文章一：如何在 Vue 中导出数据至 Excel 表格 - 知乎

        文章二：Vue3中导入导出Excel_vue3导出xlsx_疆~的博客-CSDN博客

        (建议文章一和文章二相互辅助，当然参考更多文章更好~)

效果如图：

 未对表头数据进行转换：

 对表头数据进行转换后：

 

接下来是实现步骤：

首先创建项目，这里演示使用的是Vue2 + ElementUi实现的。（具体的搭建步骤可查看一下文章）

传送门：Vue2.x+ElementUI搭建项目_Greg_Zhong的博客-CSDN博客

项目创建完成后，安装 xlsx      （具体解释可参考文章一和文章二~）

npm install -S xlsx

安装完成后，实现 template 部分

代码如下：(按钮类型可自行选择)

<template>
  <!-- 导出excel -->
  <el-button
    type="warning"
    @click="outExcle"
  >导出Excel</el-button>
</template>

然后是 js 部分

代码如下：(这里展示的是模拟后端数据返回后，对表头数据转换为中文后再将其导出~)

<script>
//这里使用的是按需引入
import * as xlsx from "xlsx";
export default {
  data() {
    return {
      // 测试数据，模拟的是后台返回的数据
      items: [
        { name: "谢国庆", age: 29, phone: "13697653219" },
        { name: "吕小果", age: 25, phone: "13235789213" },
        { name: "宋阿美", age: 27, phone: "13756776977" },
        { name: "蒋铁柱", age: 33, phone: "15003373377" },
      ],
    };
  },
  methods: {
    outExcle() {
      //表头数据转换
      const changeTableHead = (
        tableData = [],
        // 表头数据转换，可根据需要更改
        fieldName = {
          name: "姓名",
          age: "年龄",
          phone: "电话号码",
        }
      ) => {
        const list = tableData.map((item) => {
          const obj = {};
          for (const k in item) {
            if (fieldName[k]) {
              obj[fieldName[k]] = item[k];
            }
          }
          return obj;
        });
        return list;
      };

      //表头数据切换,即把英文名字改为中文名字
      const list = changeTableHead(this.items);
      // 创建工作表
      const data = xlsx.utils.json_to_sheet(list);
      // 创建工作簿
      const wb = xlsx.utils.book_new();
      // 创建工作簿, wb:工作薄, data:数据, "Sheet1":这个是一般Excel表左下叫的导航栏名
      xlsx.utils.book_append_sheet(wb, data, "Sheet1");
      // 生成文件并下载,wb:工作薄, "测试表.xlsx":这里可以自定义表格的名称,可根据需要改成动态的形式
      xlsx.writeFile(wb, "测试表.xlsx");
    },
  },
};
</script>

展示二：(这里展示的是测试数据的导出，未模拟后台返回数据，所以不需要将表头进行转换)

data() {
      return {
        items: [
          { '姓名': '谢国庆', '年龄': 29, '电话': '13697653219' },
          { '姓名': '吕小果', '年龄': 25, '电话': '13235789213' },
          { '姓名': '宋阿美', '年龄': 27, '电话': '13756776977' },
          { '姓名': '蒋铁柱', '年龄': 33, '电话': '15003373377' }
        ]
      }
    },
    methods: {
      download : function() {
          // 创建工作表
        const data = XLSX.utils.json_to_sheet(this.items)
        // 创建工作簿
        const wb = XLSX.utils.book_new()
        // 创建工作簿
        XLSX.utils.book_append_sheet(wb, data, 'kalacloud-data')
         // 生成文件并下载
        XLSX.writeFile(wb,'kalacloudExportExcel.xlsx')
      }
    }
]

完整代码展示：(展示的是模拟后台返回数据的导出)

<template>
  <!-- 导出excel -->
  <el-button
    type="warning"
    @click="outExcle"
  >导出Excel</el-button>
</template>

<script>
//这里使用的是按需引入
import * as xlsx from "xlsx";
export default {
  data() {
    return {
      // 测试数据，模拟的是后台返回的数据
      items: [
        { name: "谢国庆", age: 29, phone: "13697653219" },
        { name: "吕小果", age: 25, phone: "13235789213" },
        { name: "宋阿美", age: 27, phone: "13756776977" },
        { name: "蒋铁柱", age: 33, phone: "15003373377" },
      ],
    };
  },
  methods: {
    outExcle() {
      //表头数据切换
      const changeTableHead = (
        tableData = [],
        // 表头数据转换，可根据需要更改
        fieldName = {
          name: "姓名",
          age: "年龄",
          phone: "电话号码",
        }
      ) => {
        const list = tableData.map((item) => {
          const obj = {};
          for (const k in item) {
            if (fieldName[k]) {
              obj[fieldName[k]] = item[k];
            }
          }
          return obj;
        });
        return list;
      };

      //表头数据切换,即把英文名字改为中文名字
      const list = changeTableHead(this.items);
      // 创建工作表
      const data = xlsx.utils.json_to_sheet(list);
      // 创建工作簿
      const wb = xlsx.utils.book_new();
      // 创建工作簿, wb:工作薄, data:数据, "Sheet1":这个是一般Excel表左下叫的导航栏名
      xlsx.utils.book_append_sheet(wb, data, "Sheet1");
      // 生成文件并下载,wb:工作薄, "测试表.xlsx":这里可以自定义表格的名称,可根据需要改成动态的形式
      xlsx.writeFile(wb, "测试表.xlsx");
    },
  },
};
</script>

<style>
</style>