如何將選擇的文件轉為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
>