iT邦幫忙

0

EXCEL JS 讀取檔案問題請教

  • 分享至 

  • xImage

您好:
程式碼如下,只能先用 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 ,時間點是否就會有問題了?

謝謝

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
淺水員
iT邦大師 6 級 ‧ 2023-05-13 13:11:05
最佳解答
reader.onloadend = function() {
    // 程式碼(略)
}

是設定讀取完畢後,要做什麼樣的處理

reader.readAsArrayBuffer(file);

則是開始讀取

我想把 reader.readAsArrayBuffer(file); 放後面會比較合理
就像是我們在交辦工作時
會先跟 A 說:「當你做完這件事之後,把成果交給 B 做後續處理」
接著才讓 A 開始執行工作
網路上大多數的範例也是把 reader.readAsArrayBuffer(file); 放後面

另外,請參考 MDN:FileReader
裡面有提到

  • load 事件:讀取成功
  • error 事件:讀取失敗
  • loadend 事件:讀取結束(不論成功或失敗)

所以如果是用 loadend,要注意一下讀取失敗的處理

noway iT邦研究生 3 級 ‧ 2023-05-13 13:46:35 檢舉

謝謝您!
有比較了解了
所以 要處理的事,補如 傳到後端寫入資料庫都要再
reader.onloadend = function() {
// 程式碼(略)
}
內設定?

我要發表回答

立即登入回答