如何将选择的文件转为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
>