vue+elementui 解析（导入） excel 获取数据

（首先有这个问题出现 最大的原因是 后端的 懒 建议给后端打一顿）（手动滑稽）

问题：解析excel 取得想要的数据 然后传给后端

解决方案：

1.首先下载依赖：

命令：

npm install xlsx

然后文件里引入：

import XLSX from "xlsx";

2.这里用到的是 elementui 组件。

upload - https://element.eleme.cn/#/zh-CN/component/upload#upload-shang-chuan

样式大家随意 选择自己想要的效果就可以了。

值得注意一点的是：

upload组件的上传地址 action - 不需要填写地址 直接一个 ‘/’ 就可以 因为我们不需要他上传 只需要触发on-change 获取上传的文件 储存起来就可以了

        <el-upload
          action="/"
          :on-change="onChange"
          :auto-upload="false"
          :show-file-list="false"
          accept=".xls, .xlsx"
        >
          <el-button size="small" type="text" class="upload-bom uploadBtn">
            <span class="iconXlSX-sty-test">导入名单</span>
          </el-button>
        </el-upload>

onChange函数：

    // 文件选择回调
    onChange(file, fileList) {
      this.$confirm("此操作将永久覆盖名单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          this.fileData = file; // 保存当前选择文件
          this.readExcel(); // 调用读取数据的方法
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },

我这里加入了二次确认框。大家各凭喜好

之后就是重头戏 解析 excel

3. 直接贴代码：

    // 读取数据
    readExcel(e) {
      let that = this;
      const files = that.fileData;
      if (!files) {
        // 如果没有文件 - 当然也可以提醒用户弹个警告框 但是基本没有这种情况的出现
        return false;
      } else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {
        // 文件格式的判断
        this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
        return false;
      }
      const fileReader = new FileReader();
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result;
          // console.log(data)
          const workbook = XLSX.read(data, {
            type: "binary",
          });
          console.log(workbook.SheetNames);
          // 取第一张表
          const wsname = workbook.SheetNames[0];
          // 生成json表格内容
          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);
          // 循环 ws 取得其中的数据 
          // 把 ws 打印出来 就可以看得很清楚了 之后就进行自己想要的操作就可以了
          // 没有一样的代码 没有一样的需求
          var temporary = [];
          for (let i = 0; i < ws.length; i++) {
            temporary.push([
              ws[i].一级分销客手机号 + "",
              ws[i].一级真实姓名,
              ws[i].一级归属门店,
              ws[i].二级分销客手机号 + "",
              ws[i].二级真实姓名,
              ws[i].二级归属门店,
            ]);
          }
          this.DistributorList = temporary;
          console.log("temporary", temporary);
          // 调接口 上传 data 给后端
          接口({ List: this.DistributorList }).then((res) => {
            if (res.code == 0) {
              console.log(res);
              this.$message({
                type: "success",
                message: "上传成功!",
              });
            }
          });
        } catch (e) {
          return false;
        }
      };
      // 如果为原生 input 则应是 files[0]
      fileReader.readAsBinaryString(files.raw);
    }

表的信息要和你取数据时循环拿值的信息对应上

这个 其实 还有很多问题 没有解决

比如 一次性 取得 多个表 进行 循环取值

或者 是 如果第一行 名字不对应的话 该怎么办 等等

这个贴更多为 记录贴 有不足 请多多包涵.