excel导入

---

前言

excel导入表格转化

---

一、安装xlsx插件

npm i xlsx@0.16.8

二、使用

• 创建一个upload组件
• 写好基础结构
  例：

      <el-upload
        class="upload-demo"
        drag
        multiple
        action="#"
        accept=".xlsx,.xls"  
        :on-change="onChange"
        ref="uploadExl"
        :auto-upload="false" 
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处</div>
      </el-upload>

• 在组件中引入插件

import xlsx from "xlsx";

• xlsx读取文件的函数,放入组件methods中

    // xlsx读取文件配置
    readFile(file) {
      return new Promise((resolve) => {
        let reader = new FileReader();
        reader.readAsBinaryString(file);
        reader.onload = (ev) => {
          resolve(ev.target.result);
        };
      });
    },

• 将上传文件传入读取内容

        // 读取文件，this.readFile为上面的读取文件内容的,
        //file.raw为上传的文件信息
        let dataBinary = await this.readFile(file.raw);
        let workBook = xlsx.read(dataBinary, {
          type: "binary",
          cellDates: true,
        });
        let workSheet = workBook.Sheets[workBook.SheetNames[0]];
        const data = xlsx.utils.sheet_to_json(workSheet);
        let arr = this.success(data);//data为插件处理过的数据
        //arr为处理过的，发送请求需要的参数格式      

• 对表格转化过的数据进行处理

以下是将表头数据转化为英文，符合发送请求的参数格式的函数

  success(data) {
      //  如果是添加员工列表则做如下处理
      if (this.type == "user") {
        //处理表格数据并上传
        // 处理表格中数据的函数，将格式转为需要的格式再传给服务器，根据需求处理函数
        const userRelations = {
          //先将表头对应的英文存入该变量，后续匹配，再将表头的中文转换为英文，用于提交
          入职日期: "timeOfEntry",
          手机号: "mobile",
          姓名: "username",
          转正日期: "correctionTime",
          工号: "workNumber",
        };
        const arr = []; //用于存储最终的数据，用于提交
        data.forEach((item) => {
          let userInfo = {}; //存储每个人的信息
          Object.keys(item).forEach((key) => {
            userInfo[userRelations[key]] = item[key];
          });
          arr.push(userInfo);
        });
        return arr;
      }
    },

---