利用 js-xlsx 实现选择 Excel 文件导入后在页面显示

最新推荐文章于 2025-06-20 10:32:44 发布

原创最新推荐文章于 2025-06-20 10:32:44 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#利用 js-xlsx 实现选择 Excel 文件在页面显示

excel导入和导出组件专栏收录该内容

4 篇文章

订阅专栏

如何将选择的文件转为json数据

1.将 xlsx.full.min.js 导入到页面中；

2.然后通过 FileReader 对象读取文件利用 js-xlsx 转成 json 数据

将得到的json数据渲染到页面上

1.由于选择的Excel文件属于表格，渲染时选用 table tr td 等标签；

2.获取表头数据，得到表格列数和列名；

3.通过 for 循环创建 tr 和 td，并给 td 标签添加上列名；

4.对数据对象进行遍历，通过数据对象的键名和 td 标签的列名给对应的 td 添加内容；

5.为了使空白的表格可以编辑，在创建 td 时通过 $.html 的方法添加 input 标签，在给 td 添加内容时同样使用 $.html 进行，把不需要 input 标签的 td 的 html内容重写。

代码示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="xlsx.full.min.js" >
</script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style>
table{
 border-collapse: collapse;
 border: black 1px solid;
}
th{
 text-align: center;
 padding: 20px 0;
}
td{
 padding: 5px 10px;
 border: black 1px solid;
}
input{
 border: none;
 /* 浏览器自带的 input 标签样式并不好看 将 input 标签的边框去掉 */
}
</style>
</head>
<body>
     <input type="file" onchange="importf(this)" />
     <table id="demo">
     </table>
<script>
/*
FileReader共有4种读取方法：
1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。
2.readAsBinaryString(file)：将文件读取为二进制字符串
3.readAsDataURL(file)：将文件读取为Data URL
4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为'UTF-8'
*/
var wb;//读取完成的数据
var rABS = false; //是否将文件读取为二进制字符串

function importf(obj) {//导入
if(!obj.files) {
return;
}
var f = obj.files[0];
var reader = new FileReader();
reader.onload = function(e) {
// console.log(e.target.result);
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的数据
var data = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
console.log(data);
var keyAry = [];
// 遍历json对象，获取每一列的键名
for(var key in data[1]){
keyAry.push(key);
}
// 清除上次渲染的表格
$("#demo").empty();
// 设置表格头
$(`<thead><tr><th colspan=${keyAry.length}>${keyAry[0]}</th></tr></thead>`).appendTo($("#demo"));
for(var d of data){
// 通过循环,每有一条数据添加一行表格
var tr = $("<tr></tr>");
for(var n = 0;n< keyAry.length;n++){
// 根据keyAry数组的长度,创建每一行表格中的td
$("<td></td>").html("<input>").addClass(keyAry[n]).appendTo(tr);
}
// 遍历对象,根据键名找到是哪一列的数据,给对应的td添加内容
for(k in d){
// (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);
}
}

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

</script>
</body>
</html>

最后为了方便大家的沟通与交流请加QQ群： 625787746

请进QQ群交流：【IT博客技术分享群①】：https://jq.qq.com/?_wv=1027&k=DceI0140