导出excel功能

---

前言

导出excel插件的使用

---

一、安装插件

npm install file-saver --save
npm install script-loader --save -D

二、使用步骤

• 在src目录下新建一个vendor文件夹引入Export2Zip.js和Export2Excel.js文件，vue-elment-admin源码中有可提取
• 使用

      //  表头关系，自定义
      const headers = {
        姓名: "username",
        手机号: "mobile",
        入职日期: "timeOfEntry",
        聘用形式: "formOfEmployment",
        转正日期: "correctionTime",
        工号: "workNumber",
        部门: "departmentName",
      };
      
      // 按需加载调用导出插件
      import("@/vendor/Export2Excel").then(async (excel) => {
       //excel中包含所有下面需要使用的方法
        // 请求列表,获取所有要导出的数据
        let { rows } = await getEmployeeList({
          page: 1,
          size: this.page.total,
        });
        // 处理数据格式，变为二维数组
        let data = this.formatJson(headers, rows);
        
        // 数据传入插件准备导出
        excel.export_json_to_excel({
          header: Object.keys(headers), //表头数组
          data, //二维数组结构，必传，为导出的数据列表
          filename: "员工信息列表", //文件标题
          autoWidth: true, //列表宽度是否自适应
          bookType: "xlsx", //生成文件类型后缀
        });
      });

将请求数据处理成二维数组的函数

    // 数据处理为二维数组
    formatJson(headers, rows) {
      rows = rows.map((item) => {
        return Object.keys(headers).map((key) => {
          // 对是时间和聘用形式做处理
          if (
            headers[key] == "timeOfEntry" ||
            headers[key] == "correctionTime"
          ) {
            return formDate(item[headers[key]]);
          }
          if (headers[key] == "formOfEmployment") {
            let en = engageModality.data.find((obj) => {
              return item[headers[key]] == obj.id;
            });
            return en ? en.value : "未知";
          }

          return item[headers[key]];
        });
      });
      return rows;
    },