1.首先要借助与xlsx这个解析excel文件的插件,引入方式如下:
外链:<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
vue引入:npm install xlsx -S
,需在全局引入这个插件import XLSX from "xlsx";
2.通过获取本地excel文件来解析
解析代码如下:
let teachBtn = document.querySelector('.teachLesson')
teachBtn.addEventListener('change', (e) => {
let fileName = e.target.files[0];
let reader = new FileReader()
//启动函数
reader.readAsBinaryString(fileName)
// //onload在文件被读取时自动触发
reader.onload = function (e) {
// //workbook存放excel的所有基本信息
let workbook = XLSX.read(e.target.result, { type: 'binary' })
// //定义sheetList中存放excel表格的sheet表,就是最下方的tab
let sheetList = workbook.SheetNames
// //存放json数组格式的表格数据
let resultJson = []
// //存放字符串数组格式的表格数据
let resultArr = []
let sheet2JSONOpts = {
/** Default value for null/undefined values */
defval: ''//给defval赋值为空的字符串
}
sheetList.forEach((y) => {
let worksheet = workbook.Sheets[y]
//多传一个sheet2JSONOpts参数是想为空的列表默认传参为''
let excelData = XLSX.utils.sheet_to_json(workbook.Sheets[y], sheet2JSONOpts) //每行以json数组形式输出
let excelL = XLSX.utils.sheet_to_formulae(workbook.Sheets[y]) //生成一个excel的公式列表,可以获取到表格所有信息
let arr = []; //为了实现多表
if (excelData.length != 0) {
let subArr=[];
let className='';
//遍历sheet表的数据
for (let item in excelData) {
console.log(item);
for (let l in excelData[0]) {
if (l=='__EMPTY'|| l.trim()=='') {
alert('科目名称不能为空');
return
}
}
//判断第一行是不是符合模板要求
if (excelData[0].班级 == undefined) {
alert(y+'表excel模板不正确')
teachBtn.value = ''; //清除文本框消息
return
} else {
//定义一个对象来接收其他行的参数,也是为了重新整合传参格式
for (let j in excelData[item]) {
console.log(excelData[item][j]);
if (excelData[item][j]=='') {
alert(y+'表第' + (Number(item) + 1) + '行有参数存在空值');
teachBtn.value = '';
return
}else{
if (j!='班级') {
subArr.push(excelData[item][j])
}else{
className = excelData[item][j];
}
}
}
//重新定义我们需要的数据字段值
let rowTable = {};
rowTable.teacherName = className;
rowTable.subjectNames =subArr.join(',');
arr.push(rowTable)
}
}
resultJson.push(arr)
}
resultArr.push(excelL)
});
};
});
3.用于本地解析后却不能满足于需求,需要通过excel的服务器存放路径来解析文件,即通过url来解析excel文件
代码如下:
var xhr = new XMLHttpRequest(); xhr.open("get", url, true); xhr.responseType = "arraybuffer"; // xhr.responseType = "json"; xhr.onload = e => { if (xhr.status == 200) { let obj = {}; let data = new Uint8Array(xhr.response); let workbook = XLSX.read(data, { type: "array" });
注:即通过请求url来转换我们解析excel需要的格式
4.期间查了些资料,这篇文章对我帮助挺大,后续也有这功能需要实现的小伙伴可以去看看这个文章;附注地址:https://www.cnblogs.com/liuxianan/p/js-excel.html