前面的文章中已經講過關於js表格的導出，此文章主要說到的是excel文件如何導入到網頁中，並在網頁端顯示。
代碼部分:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js導入excel</title>
</head>
<body>
<input type="file"onchange="importf(this)" />
<p id="excelContent"></p>
<script src="xlsx.full.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/xlsx/0.11.5/xlsx.core.min.js"></script>
<script>
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) {
var data = e.target.result;
if(rABS) {
wb = XLSX.read(btoa(fixdata(data)), {//手動轉化
type: 'base64'
});
} else {
wb = XLSX.read(data, {
type: 'binary'
});
}
/**
* wb.SheetNames[0]是獲取Sheets中第一個Sheet的名字
* wb.Sheets[Sheet名]獲取第一個Sheet的數據
*/
var excelJson = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
document.getElementById("excelContent").innerHTML= JSON.stringify( excelJson );
};
if(rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}
}
//文件流轉BinaryString
function fixdata(data) {
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>
</body>
</html>
導入前的表格：
導入后的顯示：
