1、安装xlsx命令: npm i xlsx -D
2、新建testExcelToJson.vue文件
3、复制下面代码
<template>
<div>
<!-- 为了测试@change -->
<input type="text" v-model="message" @change="handleInput">
<p>{{ message }}</p>
<!-- 测试上传xlsx文件是否成功 -->
<input type="file" @change="handleInput">
</div>
</template>
<script>
//安装xlsx命令: npm i xlsx -D
import * as XLSX from "xlsx"
export default {
data() {
return {
message: ''
};
},
methods: {
handleInput(e) {
let fileObj = e.target.files[0];
// console.log(fileObj);
//FileReader对象就是专门操作二进制数据的,主要用于将文件内容读入内存
const fileReader = new FileReader();
//.readAsArrayBuffer,读取指定的Blob或File内容
fileReader.readAsArrayBuffer(fileObj);
fileReader.onload = (event) => {
const fileData = event.target.result;
//从电子表格中提取数据
const workbook = XLSX.read(fileData, {
type: "binary",
})
//按选项卡顺序列出工作表名称
const wsname = workbook.SheetNames[0];
//从工作表创建js值数组
const sheetJson = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);
console.log(sheetJson);
var stuName = [];
for (var i = 0; i < sheetJson.length; i++) {
const obj = {
'name': sheetJson[i].姓名
};
stuName.push(obj);
}
console.log(stuName);
}
}
}
};
</script>