技术要点: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的值了
}