您好:
程式碼如下,只能先用 onchange來做
<div id="upload" style="padding: 10px">
<input id="FileUpload1" name="FileUpload1" type="file" onchange="parseExcelFile2(this)" />
<!-- <input id="FileUpload1" name="FileUpload1" type="file" /> -->
<input id="Button1" type="button" value="上傳" onclick="importXLS()" />
</div>
JS
function parseExcelFile2(inputElement) {
let arr4update = new Array(); //要傳遞的陣列
var files = inputElement.files || [];
//alert(files[0]);
if (!files.length) { return };
var file = files[0];
//console.time();
var reader = new FileReader();
reader.readAsArrayBuffer(file); //---改放此處,才不會 先跑這一段,才去跑內圈
reader.onloadend = function (event) {
var arrayBuffer = reader.result;
// var buffer = Buffer.from(arrayBuffer)
// debugger
var workbook = new ExcelJS.Workbook();
var result = ''
// workbook.xlsx.read(buffer)
workbook.xlsx.load(arrayBuffer).then(function (workbook) {
//console.timeEnd();
/*
workbook.worksheets.forEach(function (sheet) {
sheet.eachRow(function (row, rowNumber) {
result += row.values + ' | \n'
})
})
*/
const sh = workbook.getWorksheet('MA'); //取得SHEET
sh.eachRow(function (row, rowNumber) {
if (rowNumber >= 3) { // 由1起算
objPost = new Object();
objPost.empno = row._cells[0].value.trim();
arr4update.push(objPost); // 傳入陣列
//result += row.values + ' | \n'
}//--if (rowNumber >= 3) {
})
//result2.innerHTML = result
});
};
alert(arr4update);
// reader.readAsArrayBuffer(file);
}//--unction parseExcelFile2(inputElement
結果
他 reader.readAsArrayBuffer(file); 做完˙
做 reader.onloadend = function (event).. 會先跳到 reader.onloadend 的結束
再去跑 workbook.xlsx.load(arrayBuffer).then 這一區塊 這樣正常嗎?
若還要去跑 其他 function ,時間點是否就會有問題了?
謝謝
reader.onloadend = function() {
// 程式碼(略)
}
是設定讀取完畢後,要做什麼樣的處理
reader.readAsArrayBuffer(file);
則是開始讀取
我想把 reader.readAsArrayBuffer(file);
放後面會比較合理
就像是我們在交辦工作時
會先跟 A 說:「當你做完這件事之後,把成果交給 B 做後續處理」
接著才讓 A 開始執行工作
網路上大多數的範例也是把 reader.readAsArrayBuffer(file);
放後面
另外,請參考 MDN:FileReader
裡面有提到
所以如果是用 loadend,要注意一下讀取失敗的處理