html页面获取后台数据xlsx算法,JS读取xlsx，然后显示数据，点击一行获取相关数据...

/*FileReader共有4种读取方法：

1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。

2.readAsBinaryString(file)：将文件读取为二进制字符串

3.readAsDataURL(file)：将文件读取为Data URL

4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为'UTF-8'*/

varwb;//读取完成的数据

varrABS= false;//是否将文件读取为二进制字符串

functionimportf(obj) {//导入

if(!obj.files) {return;

}varf=obj.files[0];varreader= newFileReader();

reader.οnlοad= function(e) {if(rABS) {

wb=XLSX.read(btoa(fixdata(e.target.result)), {//手动转化

type:'base64'});

}else{

wb=XLSX.read(e.target.result, {

type:'binary'});

}//wb.SheetNames[0]是获取Sheets中第一个Sheet的名字

//wb.Sheets[Sheet名]获取第一个Sheet的数据

vardata=XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);

console.log(data);varkeyAry=[];//遍历json对象，获取每一列的键名

for(varkeyindata[1]){

keyAry.push(key);

}//清除上次渲染的表格

$("#demo").empty();//设置表格头

$(`${keyAry[0]}${keyAry[1]}${keyAry[2]}${keyAry[3]}`).appendTo($("#demo"));for(vard of data){//通过循环,每有一条数据添加一行表格

vartr=$("

");for(varn= 0;n

//根据keyAry数组的长度,创建每一行表格中的td

if(keyAry[n]=="编号"){

className1="order"}else if(keyAry[n]=="姓名"){

className1="name"}else if(keyAry[n]=="手机号"){

className1="iphone"}else if(keyAry[n]=="Id"){

className1="id"};

$("

").html("").addClass(className1).appendTo(tr);

}//遍历对象,根据键名找到是哪一列的数据,给对应的td添加内容

for(kind){//(tr[0].children[keyAry.indexOf(k)])

$(tr[0].children[keyAry.indexOf(k)]).html(d[k]);

}

tr.appendTo($("#demo"));

}

}if(rABS) {

reader.readAsArrayBuffer(f);

}else{

reader.readAsBinaryString(f);

}

}functionfixdata(data) {//文件流转BinaryStrings

varo= "",

l= 0,

w= 10240;

jsArry=[];for(; l

}functionliClick(obj,event){vardiv=$(obj.innerHTML);variphone=div.filter(".iphone").text();

console.log(iphone)

}