前端解析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-uploadaction="/":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的值了
}