如何使用js-xlsx從HTML輸入中讀取文件？

我有一個角度應用程序，我試圖讀取和解析一個.xlsx文件，訴諸js-xlsx JavaScript庫。不過，我無法在JavaScript端打開文件。如何使用js-xlsx從HTML輸入中讀取文件？

在我的html上，我有一個簡單的類型文件輸入，打開一個文件選擇器，用戶可以選擇一個合適的文件。我無法使用角度指令將文件發送到我的控制器上的函數，因爲只有在按下輸入按鈕時用戶才選擇文件，ng-change纔會更新。我最終不得不通過將'onchange =「angular.element（this）.scope（）。handleFile（this）''）添加到我的輸入中，從而將普通的舊JavaScript與某些角度混合在一起。

附加quotation.html：

<div class="container-fluid" ng-controller="addQuotationController"> 
... 
<input type="file" id="file" class="" onchange="angular.element(this).scope().handleFile(this)"> 
... 
</div>

這解決了我不能夠從HTML文件發送到事物的JavaScript端的問題。但是，我無法打開文件。我已經從官方文檔中嘗試了很多例子，但是我沒有成功實現它的工作。這是我當前的代碼：

附加quotation.component.js：

$scope.handleFile = function(e) { 
    var files = e.target.files; 
    var i,f; 
    for (i = 0, f = files[i]; i != files.length; ++i) { 
     var reader = new FileReader(); 
     var name = f.name; 
     reader.onload = function(e) { 
      var data = e.target.result; 

      var workbook = XLSX.read(data, {type: 'binary'}); 

      /* DO SOMETHING WITH workbook HERE */ 
     }; 
     reader.readAsBinaryString(f); 
    } 
}

我試圖調試，發現該文件確實進入方法，但隨後試圖訪問時發生異常「e.target.files;」

我完全失去了在如何解決這一問題，並且我見過的例子是沒有任何幫助。我究竟做錯了什麼？

來源

2016-09-07 João Paiva

You are looking for wrong object rather you should be doing e.files 

$scope.handleFile = function(e) { 

console.log(e.files); 
var files = e.files; 
var i,f; 
for (i = 0, f = files[i]; i != files.length; ++i) { 
    var reader = new FileReader(); 
    var name = f.name; 
    reader.onload = function(e) { 
     var data = e.target.result; 

     var workbook = XLSX.read(data, {type: 'binary'}); 

     /* DO SOMETHING WITH workbook HERE */ 
    }; 
    reader.readAsBinaryString(f); 
} 

}

來源

2016-09-08 06:08:10

非常感謝你，它的工作完美:) –

如何使用js-xlsx從HTML輸入中讀取文件？

回答

相關問題