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

我就是我 2023-09-25 23:05 15阅读 0赞

### 技术要点：Vue、Element、JSON ###

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

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

### 注意注意注意 ###

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

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

![在这里插入图片描述][c920cac5adae472abe4aa3da685cff21.png]  
**（2）这样的就能读取两行。**

![在这里插入图片描述][750c9fa1f52e4094be110034319843ec.png]

**（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";

![在这里插入图片描述][d65dbf196fb94418aa743a128b4ac47a.png]

**（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的值了
    }

![在这里插入图片描述][0d67a3d2afbb420684a1eb7dec485c47.png]

[c920cac5adae472abe4aa3da685cff21.png]: https://img-blog.csdnimg.cn/c920cac5adae472abe4aa3da685cff21.png
[750c9fa1f52e4094be110034319843ec.png]: https://img-blog.csdnimg.cn/750c9fa1f52e4094be110034319843ec.png
[d65dbf196fb94418aa743a128b4ac47a.png]: https://img-blog.csdnimg.cn/d65dbf196fb94418aa743a128b4ac47a.png
[0d67a3d2afbb420684a1eb7dec485c47.png]: https://img-blog.csdnimg.cn/0d67a3d2afbb420684a1eb7dec485c47.png