前端导入excel文件，获取表格数据

最新推荐文章于 2025-03-25 15:34:18 发布

原创最新推荐文章于 2025-03-25 15:34:18 发布 · 791 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #excel

文章介绍了如何在HTML表单中添加文件上传功能，使用FileReaderAPI读取文件，然后利用XLSX库将Excel文件转换为JSON格式，展示和处理数据的过程。

HTML片段：

js片段：

let transferData;//读取完成的数据
let rABS = false;
//是否将文件读取为二进制字符串
function importf(obj) {//导入
if(!obj.files) { return; }
var f = obj.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
if(rABS) {
transferData = XLSX.read(btoa(fixdata(data)), {//手动转化
type: 'base64'
});
} else {
transferData = XLSX.read(data, {
type: 'binary'
});
}
var seltext=transferData.SheetNames[0]//是获取Sheets中第一个Sheet的名字
//transferData.Sheets[Sheet名]获取第一个Sheet的数据
// document.getElementById("demo").innerHTML= JSON.stringify( XLSX.utils.sheet_to_json(transferData.Sheets[transferData.SheetNames[0]]) );
var objData = JSON.stringify( XLSX.utils.sheet_to_json(transferData.Sheets[seltext]) );
console.log(objData);
let obj = JSON.parse(objData)
console.log('转换后',obj)
}
if(rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}

function fixdata(data) {
//文件流转BinaryString
var o = "",
l = 0,
w = 10240;
for(; l < data.byteLength / w; ++l)
o += String.fromCharCode.apply(null,
new Uint8Array(data.slice(l * w, l * w + w)));
o += String.fromCharCode.apply(null,
new Uint8Array(data.slice(l * w)));
return o;
}
}

</script>