VUE中如何导出表格中的数据，导出成excel

我最近有用到这个东西，看到过网上的不少文章来说这个东西，但是感觉他们的都是比较的麻烦，我这里记录一下一个比较简单的。
先看看我的项目截图

下来我们直接看咋样来用：

1. 首先我们需要下载三个依赖包

 cnpm install -S xlsx
 cnpm install -D script-loader
 cnpm install -S file-saver

这里我是用的cnpm这样安装比较的快一点，当然也可以用npm,但是还是推荐使用cnpm。
这里先要安装两个js文件我放在了网盘里面大家需要自取
链接: https://pan.baidu.com/s/1yN1Zj-mX8VkMIUdibY77nA 提取码: xdfv。

2. 第二步就是把两个js文件下载下来， 在我们的vue项目中任意建立一个文件夹（我这里为演示方便所以将文件夹命名为excel,你们可以自行命名），将文件放入
3. 在我们需要导出的页面写一个导出函数和按钮（用来触发函数）

<div class="excel">
        <span @click="exportData"
          ><i
            class="el-icon-printer"
            style="font-size: 35px; color: rgba(48, 127, 247, 0.8)"
        /></span>
      </div>

 // 导出数据
    exportData() {
      this.excelData = this.planList; //将你要导出的数组数据（historyList）赋值给excelDate
      this.export2Excel(); //调用export2Excel函数，填写表头（clomns里的type）和对应字段(historyList里的属性名)
    },
    //表格数据写入excel
    export2Excel() {
      var that = this;
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/assets/excel/Export2Excel");
        //这里使用绝对路径( @表示src文件夹 )，使用@/+存放export2Excel的路径【也可以写成相对于你当前"xxx.vue"文件的相对路径，例如我的页面放在assets文件夹同级下的views文件夹下的“home.vue”里，那这里路径也可以写成"../assets/excel/Export2Excel"】
        const tHeader = [
          "单号",
          "标题",
          "申请时间",
          "申请人",
          "备注",
          "结束时间",
        ]; // 导出的excel表头名信息
        const filterVal = [
          "purchase_order_number",
          "purchase_title",
          "application_time",
          "applicant",
          "remarks",
          "approval_end_time",
        ]; // 导出的excel表头字段名，需要导出表格字段名
        const list = that.excelData;
        const data = that.formatJson(filterVal, list);

        export_json_to_excel(tHeader, data, "采购计划表单"); // 导出的表格名称，根据需要自己命名
      });
    },
    //格式转换，直接复制即可,不需要修改什么
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },

注意：

这里是你要导出的数据的字段，这里填的字段就是你的excel中排序的字段。

这里的数据是后端返回给我们的json数据。这个导出还是挺简单的，有问题希望大家留言。