前端解析Excel中的数据进行操作

技术要点：Vue、Element、JSON

功能描述：读取Excel中的数据，利用JavaScript技术奖数据转成Json格式进行操作！

功能描述：只能用前端操作数据，并未实现将数据传送至后端处理！

注意注意注意

如果你的表格中只有一行数据是无法被读取的，这种方法只能读取至少两行的表格！

（1）例如这样的就无法读取。

（2）这样的就能读取两行。

（3）只限于前端操作，并未向后端提供excel数据

（一）安装插件：

1、element依赖

（1）安装element依赖

npm i element-ui -S

2、xlsx依赖

（1）安装xlsx依赖

npm install xlsx

（2）文件中引入

import XLSX from "xlsx";

（二）页面开发

1、添加Element组件

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

2、methods方法添加

（1）引入依赖

import XLSX from "xlsx";

（2）文件选择回调

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

（3）Excel表格数据处理

      // 读取数据
      readExcel(e) {
          console.log(e)
          let that = this;
          const files = that.fileData;
          console.log(files)
          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;
                  const workbook = XLSX.read(data, {
                      type: "binary",
                  });
                  // 取第一张表
                  const wsname = workbook.SheetNames[0];
                  // 生成json表格内容
                  const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);
                  // 循环 ws 取得其中的数据
                  // 把 ws 打印出来 就可以看得很清楚了 之后就进行自己想要的操作就可以了
                  // 没有一样的代码 没有一样的需求
                  var temporary = [];
                  var temporaryValue = [];
                  // for (let i = 0; i < ws.length; i++) {
                  //     temporary.push([
                  //         ws[i].姓名 + "",
                  //         ws[i].年龄,
                  //     ]);
                  // }
                  //第一种方式
                  console.log("JSON数据转换")
                  console.log(ws[0])
                  console.log(ws[1])
                  console.log("JSON数据转换")
                  
                  //对Json数据进行处理
                  for( var attr in ws[1] ){
                      console.log( attr + ' : ' + ws[1][attr] );  
                      // 注意这里访问不能用.访问，也不能加引号，否则就代表访问的是json里面名称为attr的值了
                      temporary.push(parseInt(attr))
                      temporaryValue.push(ws[1][attr])
                  }
                  this.init(temporaryValue);
                  this.DistributorList = temporary;
              } catch (e) {
                  return false;
              }
          };
          // 如果为原生 input 则应是 files[0]
          fileReader.readAsBinaryString(files.raw);
      },

（4）注意点

注意在这里如果你的表格中只有一行数据是无法被读取的，这种方法只能读取至少两行的表格！

3、JSON字符串处理方式

（1）JSON字符串：

var jsonStr ='{"name":"Liza", "password":"123"}' ;

（2）JSON对象：

var jsonObj = {"name":"Liza", "password":"123"};  //json对象的key键值对中的键必须带有“”

（3）JSON的遍历：

var json1 = { 'name' : 'yy' , 'age' : 11 , 'fun' : '前端开发' };
for( var attr in json1 ){
        alert( attr + ' : ' + json1[attr] );  // 注意这里访问不能用.访问，也不能加引号，否则就代表访问的是json里面名称为attr的值了
}